質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

Q&A

1回答

1761閲覧

Pugで別ファイルの変数が呼び出せない

退会済みユーザー

退会済みユーザー

総合スコア0

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

0グッド

0クリップ

投稿2020/08/07 07:05

Pugで「変数用のファイル」と「メインのファイル」があり、
「変数用のファイル」で定義した変数を「メインのファイル」で呼び出そうとすると、
出力されたhtmlでは値が空の状態になってしまいます。
(エラーは出ません)

特に複雑なことはしていません。

なにが原因でしょうか?

pug(2ファイルとも同階層)

//- _config.pug(変数用ファイル) - var hoge = 'title'; //- index.pug(メインファイル) p #{hoge}

webpack.config.js

一応、webpack関係も記載しておきます。

const path = require('path'); const globule = require('globule'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const dir = { src: path.join(__dirname, '_src'), public: path.join(__dirname, 'public'), assets: 'assets', }; const from = 'pug'; const to = 'html'; const htmlPluginConfig = globule.find([`**/*.${from}`, `!**/_*.${from}`], { cwd: dir.src }).map(filename => { const file = filename.replace(new RegExp(`.${from}$`, 'i'), `.${to}`).split('/') return new HtmlWebpackPlugin({ filename: filename.replace(new RegExp(`.${from}$`, 'i'), `.${to}`).replace(/(./)?pug/, '.'), template: `./${filename}`, inject: false, minify: false, }) }); module.exports = { context: dir.src, entry: { application: path.resolve(dir.src, 'js/_index.js'), 'style.css': path.resolve(dir.src, 'sass/_index.sass'), }, output: { filename: `${dir.assets}/js/[name].js`, path: dir.public }, devServer: { contentBase: dir.public, open: true, port: 3080, }, plugins: [ new FixStyleOnlyEntriesPlugin(), new MiniCssExtractPlugin({ filename: `${dir.assets}/css/[name]` }), ...htmlPluginConfig ], resolve: { modules: ['node_modules'], extensions: ['.js', '.css'] }, devtool: 'source-map', optimization: { minimizer: [ new OptimizeCSSAssetsPlugin(), new TerserPlugin({ terserOptions: { ecma: 6, compress: true, output: { comments: false, beautify: false } } }) ], }, module: { rules: [{ test: /.js$/, exclude: /node_modules/, use: [{ loader: 'babel-loader', options: { presets: [ '@babel/preset-env' ] } }] }, { test: /.(sass|scss|css)$/, use: [{ loader: MiniCssExtractPlugin.loader }, { loader: 'css-loader', options: { url: false, sourceMap: true, importLoaders: 2 }, }, { loader: 'postcss-loader', options: { sourceMap: true, plugins: [ require('autoprefixer')({ grid: true }) ] } }, { loader: 'sass-loader', options: { sourceMap: true } }, ], }, { test: /.pug$/, use: { loader: 'pug-loader', options: { pretty: true } } } ] } };

package.json

{ "name": "webpack", "version": "1.0.0", "private": true, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "watch": "webpack --watch --inline --mode=development", "start": "webpack-dev-server", "build": "webpack --mode=production" }, "devDependencies": { "@babel/core": "^7.11.0", "@babel/preset-env": "^7.11.0", "autoprefixer": "^9.8.6", "babel-loader": "^8.1.0", "css-loader": "^3.6.0", "globule": "^1.3.2", "html-webpack-plugin": "^4.3.0", "mini-css-extract-plugin": "^0.9.0", "optimize-css-assets-webpack-plugin": "^5.0.3", "postcss-loader": "^3.0.0", "pug": "^2.0.3", "pug-loader": "^2.4.0", "sass": "^1.26.10", "sass-loader": "^9.0.2", "terser-webpack-plugin": "^3.1.0", "webpack": "^4.43.0", "webpack-cli": "^3.3.12", "webpack-dev-server": "^3.11.0", "webpack-fix-style-only-entries": "^0.5.1" }, "browserslist": [ "last 2 version", "> 1%" ] }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

_config.pugをincludeしてきてないってだけではなく?
https://pugjs.org/language/includes.html

投稿2022/08/09 12:08

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問