问题标签 [pug-loader]

PUG 正在使用 GULP 编译成 HTML。如果您使用的是 gulp-pug 并将 Pretty 选项设置为 true，则代码的组合很奇怪。

我已经用 gulp-html-beauty 解决了这个问题，这是唯一困扰我的事情。

目前的情况

我想要的是

请帮帮我

我正在尝试使用 Pug 和多个入口点设置 Parcel。我已经梳理了文档，但我无法弄清楚我做错了什么。现在我有两个主要问题：

1. CSS 仅about.html在构建时加载，而不是index.html.
2. HTML 文件正在构建中，但我需要将它们构建到文件夹中。所以about.pug应该建为about/index.html. 如何将 pug 文件构建到各自的文件夹中：page/index.html？

项目结构：

两者about.pug都index.pug在使用默认布局src/layouts/default.pug。

该SCSS文件正在index.js像这样导入：

import "../styles/main.scss";

但由于某种原因，CSS 只是在构建时才被导入about.html而不是index.html在构建时。

这是我的package.json构建脚本：

如果你想看看，这里是一个 repo：github 存储库

一般设置

我正在基于这个很棒的样板 构建一个带有webpack和pug的小型网站： https ://github.com/alexnoz/webpack-pug-scss-boilerplate.git

该项目已启动并正在运行，我能够正确呈现 pug 文件。

要求

现在我需要在所有 webpack 编译发生之前加载一些数据。我想将该数据传递给 pug-html-loader，如已回答的问题中所述。

问题/问题

我的问题是，我必须异步加载该数据。所以我所拥有的是一个Promise。如何确保在webpack 编译发生之前完成承诺？

这是我目前行不通的方法

pug-html-loader接受options.data如果我把静态数据放在那里，那么这个数据在哈巴狗模板中可用。

我知道我的问题似乎是，在 webpack 编译发生之前，我的 Promise 尚未解决。但是如何让 webpack 以某种方式“等待” Promise 解决呢？

我已经尝试注册 webpack 事件挂钩。但没有成功。有什么进一步的建议吗？

我坚持使用 webpack 构建节点 js 项目，并且我正在使用 pug 引擎作为前端。

我的项目结构：

包.json 文件

实际上我想要的是，在构建之后，一个 dist 文件夹包含一个 build.js 或其名称以及同一目录中的所有公用文件夹资产。我尝试使用以下代码来构建项目。

Webpack.config.js

我有一个网站，主要是用 pug（html 预处理器）编写的。我使用 output.publicPath 等于 '/' 所以我可以在开发模式下运行 webpack 并轻松工作，将项目文件夹视为根目录，但每个 href、src 和 url 都是绝对路径。当我构建项目时，我想通过在乞求中添加一些节点（例如，让我们使用'/path/to/'）来更改每条路径。例如，我有一个图像

在我建立这个项目之后，我想收到这个：

并接收与 href 和 url 相同的内容。

我做了一个 webpack 构建配置并将 output.publicPath 设置为 '/path/to/' 但它改变了链接的 css 和 js 文件的路径：

我很高兴收到任何解决方案、想法或建议。

我有一个用于审查块的哈巴狗混合。添加评论，我传递了我想用作个人资料头像的图像，因此我需要即时加载它。让我们将代码简化为仅加载图像。

问题是我必须在 require 函数中使用相对路径，因为 mixin 不能在单页上使用。

我已经阅读了 pug 文档，所以我知道 wepback 存在问题，因为它在捆绑dist文件夹中搜索（所有项目都在其中捆绑）。所以我必须在 webpack 配置中设置一些东西。目前我只是使用 pug-loader 加载哈巴狗。

我想有一些插件或额外的选项，但我还没有找到。对我来说完美的结果是获得 base64 格式的图像。

php.json

家玉

模板.js

我的输出

'<' '?' 之间 插入空格并且php代码无法正常工作。我该如何解决？我尝试使用带有正则表达式的'ignoreCustomFragments'的htmlmin，但它也不起作用......

我有一个哈巴狗混合。Mixin 用于使用作为参数传递的任何图像名称来创建块。

因此，我希望 webpack 将此图像放入dist/img/或处理并用它的 base64 格式替换此路径。

由于我需要在 sass 和 pug中保存相对路径url-loader，我使用. 所以我当前对 pug 和 image 的配置如下所示：

感谢您的帮助，因为我的想法已经不多了：c

当我的文件被压缩时，老师的文件正常返回。

像这样 ：

我尝试添加 .json 文件：

但没有任何改变。

我一直在努力让 Pug 模板与基于 Vue 类的组件一起使用，并将 pug 模板作为单独的文件。根据添加这应该只是工作的文档：

但事实并非如此。我得到错误

这是我的组件“HelloWorld.ts”：

无论我尝试与加载程序配置进行何种组合，都无法使其工作。我还尝试将加载器移动到 vue.config.js 的 chainWebpack 部分，但只是给出相同的错误。

奇怪的是，如果我使用以下 loader 短格式导入它，它可以正常工作：

谁能告诉我哪里可能出错了？它快把我逼疯了。