问题标签 [pug-loader]

当我运行 grunt watch 时，它只会在等待模式下继续运行并卡在那里？但我希望 grunt watch 能够正常工作，因为它可以让我在开发模式下工作。现在在我的项目中发生的事情是我必须一次又一次地运行 grunt 命令来构建项目以查看小的更改，这需要太多时间？我是新来的咕噜声。我想在快速/开发模式下工作，并希望在 grunt 文件中启用热重载功能以及 grunt watch。请提出一些解决方案。

是否可以在运行时使用 Webpack 和 Express 动态呈现模板文件（例如 Pug 或 Handlebars）？

我的问题是在加载我的根页面 ( index.pug) 时，加载了 html，但没有加载任何资产。

例子：

如果我删除'/'路由处理程序，页面加载所有资产就好了。

客户端webpack.config.js文件：

服务器webpack.server.config.js：

我正在学习 CSS 课程并且已经厌倦了手动输入类似的 HTML 结构，所以我连接了 pug 模板和 webpack-dev-server 来提供它。

注意：我的入口点不是.scss文件.js

我有两个问题：

srca) 只有来自 css 的资产被加载到 build 文件夹，但模板中属性中引用的图像和 svg.pug被忽略。

b）浏览器重新加载不起作用webpack-dev-server

我的webpack.config.js：

请指教。

我正在尝试将需要包含新行/刹车线的值传递到 pug 文件中。

到目前为止我已经尝试过

但是当这在 pug through 中呈现时

html呈现为

但是显示的网页上没有显示新行，这是问题所在。请帮忙？

如果 Express 提供的哈巴狗模板存在于./src/client/views/index.pug. Webpack 捆绑了 Javascript / CSS 并有一个配置来输出一个 pug 文件..

Express 被设置为从它的视图目录服务这条路线..

如何使用 Webpack 开发服务器为捆绑资产提供此索引？

现在我正在使用 gulp-pug

如何构建我的 HTML，以便文件名是文件夹名。

例子：

我决定在我的 webpack 项目中从ejs到pug作为模板引擎。我需要的是预编译的静态输出（无论是在开发模式下还是在生产模式下）。另外，我需要通过编译过程将数据传递给模板，并且我使用了自定义选项htmlWebpackPlugin。项目结构如下：

我找到并尝试的第一种方法是将数据传递到入口点（编译本地变量index.js并将它们插入到页面innerHTML =）。这种方式绝对不适合我，因为我需要 100% 预编译的静态输出而不需要运行时 HTML 插入。然后乐趣就开始了……

例如，我需要创建导航。我的导航架构如下：

和哈巴狗部分为此app/views/includes/nav.pug：

该部分包含在通用布局中layout.pug：

希望app/views/includes/nav.pug能插入nav变量。

所以我发现了两种情况：使用module -> rules -> loader和内联加载器到 HTMLWebpackPlugin。

第 1 个。webpack.config.js设置：

在这种情况下，我无法将选项传递htmlWebpackPlugin到模板中。如 中所述layout.pug，我尝试从选项中破坏title和nav字段并获得编译错误：Cannot read property 'options' of undefined.

第2种情况。webpack.config.js：

layout.pug这种方法可以完美地使用从 中获取的选项进行编译htmlWebpackPlugin，直到它不包含包含的部分。我需要将我的传递nav给相应的部分并从那里渲染导航。并且部分开始向编译中抛出错误，就好像它不理解pug并且需要加载器一样：

我完全一团糟。我不想退缩ejs，但如果我找不到答案，似乎我将不得不这样做。

谢谢转发。

我在这里和那里搜索过很少使用Pug (Jade)的问题，甚至更少的答案。我认为在 GitHub 中查找代码会给我一个答案，但只会带来更多的混乱、过时的代码和不起作用的 repos。

我想要的很简单：开发一个简单的 Node+Express+Postgress+Pug 站点，具有webpack 的实时重载功能。Postgress 还没有参与进来，因为使用 Webpack 作为开发辅助工具还没有奏效。

使用HMR和 html-webpack-plugin，我期待快速的开发体验。我的 *.pug 文件应该显示控制器发送的数据，就像我运行节点服务器而不是 Webpack 的webpack-dev-server时那样。此外，它无法刷新浏览器的更改。其他我对捆绑没有问题的东西都很好；它可以快速重新加载服务器更改等。

因为我没有做 SPA，而且我看到你必须为每个 *.pug 页面生成一个新的插件对象，所以我制作了一个简单的 js 实用程序来收集所有 *.pug 页面，所以我可以这样做：

我已经测试过了，它可以工作，所以我不需要编写和更新大量愚蠢的代码。

通过该 hack，我可以看到浏览器中呈现的 PUG 页面。但它们没有显示 Express 控制器发送的数据。例如：

index.js:

index.pug:：

这只是显示“你在”。同样，如果由 Node 运行，它会显示正确的“您在索引页面中”。如您所知，我正在尝试使用htmlWebpackPlugin.options.title. 但如果这是唯一可行的方法（通过该对象），我怎样才能从 Express 中获取数据？html-webpack-plugin 是否使模板成为静态的，从而使 pug 变得无用？

我在用着：

我做了一个更精简的分支，一切都准备好了，以便于帮助。这是： https ://github.com/nmaxcom/Express-pug-webpack

我正在尝试让 Webpack 从使用 HtmlWebpackPlugin 的 pug 模板和 css 模块开始呈现静态 html 并导出相关 css。
我的设置如下

然后在我的 index.pug 文件中，我想做这样的事情：

问题是，如果我保持原样，我会得到

我设法通过执行正确地在 pug 模板中获取转换后的类名

但是通过从链中删除 MiniCssExtractLoader 我显然没有得到导出的 css 文件。
通过设置onlyLocals: true，pug 中的类按预期工作，因为 css-loader 导出映射。如果我- var styles = require("../styles/style.module.scss")从 pug 模板中删除并将 MiniCssExtractPlugin 留在加载程序的链中，我会得到相反的结果：css 文件，但没有映射。

任何的想法？有没有办法导出 css 文件并直接在 pug 模板中获取映射？

PS 我也从 pug-loader 的 GitHub 页面看到了这个例子

以为template(locals)会将本地人注入模板，但我可能误解了，因为返回的 html 具有未更改的类名称，因此问题仍然存在。

尝试使用括号表示法时，我似乎在从 mixin 访问值时遇到问题。我有以下设置：

json

哈巴狗混音

使用哈巴狗混合

我收到一个错误Cannot read property 'title' of undefined.

如果我将其更改为htmlWebpackPlugin.options.locals.pages.about.title它将解析得很好。

如果我将其更改为htmlWebpackPlugin.options.locals.pages[thePage]它将返回[object Object]，但我无法访问任何属性。

如果我将其更改为htmlWebpackPlugin.options.page或仅使用thePage，则将呈现“关于”。

我做了一个 typeof 来检查它是否是一个字符串。这是。我试过先把它放到一个变量中。同样的问题。

有什么想法吗？