如何将Pug添加到Angular CLI？

Question

有人成功将.pug添加到angular-cli中了吗？

我尝试运行npm install pug --save，但我不知道在哪里更改呈现方式，以便使用.pug代替.html。

angular-cli的链接在这里

请分享一个简短的教程，这将帮助很多人 :)

- Klaus Jakobsen

Answer 1

对于 Angular 6+，您可以在根文件夹中运行 ng add ng-cli-pug-loader 命令来启用您的 angilar-cli 项目中的 pug 支持。

- Anton Pegov

Answer 2

所以在阅读了关于angular-cli git的内容后，实现pug并不是近期的计划。

那么这里有一个解决方法：它不是angular-cli，但是它是一个更新的生成器，可以运行angular2 final。

使用来自AngularClass的angular2-webpack生成器 - 这里 (只需按照文档中详细的说明操作)

想要pug？没问题，只需跟随链接这里

想要Scss？没问题，只需跟随链接这里

简而言之，只需进行npm安装并将这些行添加到webpack.common文件中。然后在组件中使用require()和./filename.pug :) 但请跟随链接，您会没问题的。

感谢AngularClass <3

这就是我一直在寻找的 - angular2、typescript、scss和pug.. 真香！

      loaders: [
        { 
          test: /\.pug$/, 
          loader: 'pug-html-loader' 
        },
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
        },

- Klaus Jakobsen

---

如果你想使用sass而不是scss，只需将test：/ \ .scss $ /替换为test：/ \ .sass $ /，并将文件从.scss重命名为.sass。 - Klaus Jakobsen

你有没有这个配置的 git 仓库？ - Vivek Doshi

@Vivek-Doshi 这里有一个使用localstorage、pug、sass、angular2、webpack2和一些动画的设置 https://github.com/theklausster/sweco 随意借鉴 :) - Klaus Jakobsen

Answer 3

使用 angular-cli 可以进行如下工作。

• 使用 npm install pug-cli --save-dev 命令安装 pug-cli。现在你可以将你的 .pug 文件编译成 .html。
• 在你的 package.json 的 scripts 中添加一行新的 script： "puggy": "pug src -P -w"。这将把 src 内的所有 .pug 文件编译为 .html 并开始监视它们。当然，任务名称无关紧要。
• 编辑你的 start 任务，或创建一个新的任务，先运行 puggy 然后再运行 serve： "start" : "npm run puggy & ng serve"。

你的 package.json 应该是这样的：

"scripts": {
    "ng": "ng",
    "start" : "npm run puggy & ng serve",
    "puggy": "pug src -P -w",
    . . . other tasks
}

现在，只需在终端中运行npm start，或者你给任务命名的任何名称，并且你应该看到所有的.pug文件被编译/监视/渲染，然后一切都被提供出来。

我建议您将所有.html文件添加到您的.gitignore中，将/src/**/*.html添加到其中，并仅将.pug文件推送到您的存储库中。确保使用git rm --cached *.html删除缓存的.html文件。

现在，您将能够编写一个类似于：

form(novalidate, '#f'='ngForm', '(ngSubmit)'='onSignin(f)')

将其编译成HTML格式。

<form novalidate="novalidate" #f="ngForm" (ngSubmit)="onSignin(f)"></form>

- AndreaM16

Answer 4

多年来，我一直在使用（相当脆弱的）ng-cli-pug-loader方法。它有其作用，我很感激它，但我开发了一种（稍微不那么脆弱的）添加pug支持的方法。虽然它不能通过Angular CLI自动完成 - 也许有人可以帮忙？但现在对于我认为更好的解决方案来说，步骤并不是太多。

我在这里记录了{{Angular pug solution}}，以备后人查阅，请查看README的顶部进行解释。

如果您想要一个更加稳定的方法（不会创建新的AngularCompilerPlugin），请查看angular.webpack.js和函数addSimplePugSupport。

如果您发现问题，请通过此处的评论或我的Git存储库让我知道。

- ryanm

Answer 5

如果你想要使用Stylus。

{
    test:/\.styl$/,
    use: ['to-string-loader', 'css-loader', 'stylus-loader'],           
}

SCSS的配置已经被更改

{
    test: /\.scss$/,
    use: ['to-string-loader', 'css-loader', 'sass-loader'],
    exclude: [helpers.root('src', 'styles')]
 }

- user2584621

---

我看不出你的回答如何回答这个问题... CSS 预处理器与 Jade/Pug 没有任何关系。 - developer033

错误，首先在webpack.common.js的module.rules中添加'.pug'到'extensions'和{ test: /.(pug|jade)$/, use: ['pug-ng-html-loader'] }，然后npm install pug pug-ng-html-loader，最后在templateUrl中使用pug文件路径。 - user2584621