2

我正在尝试将 Angular 与PurifyCss一起使用（使用 webpack），但到目前为止，该过程没有成功......我正在开发环境中尝试这个，基本上我所做的是：

  • 使用 AngularCli 创建新项目ng new my-project
  • 弹出 webpack 配置ng eject
  • 安装 PurifyCssnpm i --save-dev purify-css purifycss-webpack

现在这就是我认为它的诀窍所在，因为在 PurifyCss github 页面上它说：

您应该将它与 extract-text-webpack-plugin 一起使用。

但是当我尝试添加它时，我不断收到错误。我不知道这是因为 Angular 使用 JS 文件而不是 CSS，还是因为我做错了什么。我对 WebPack 配置所做的唯一更改是：

注意：我将它与scss文件一起使用。

我正在删除一些 webpack 行，但是如果撤消我在下面描述的更改，代码就可以正常工作。

const glob = require('glob-all');
const PurifyCSSPlugin = require('purifycss-webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

"module": {
    "rules": [
        // other rules...
        {
            "exclude": [
                path.join(process.cwd(), "src\\styles.scss")
            ],
            "test": /\.scss$|\.sass$/,
            "use": ExtractTextPlugin.extract({
                "use": [
                    "exports-loader?module.exports.toString()",
                    // nothing changes here
                ]
            })
        },
        {
            "include": [
                path.join(process.cwd(), "src\\styles.scss")
            ],
            "test": /\.scss$|\.sass$/,
            "use": ExtractTextPlugin.extract({
                "use": [
                    "style-loader",
                    // nothing changes here
                ]
            })
        },
        // other rules...
    ]
}
"plugins": [
    new ExtractTextPlugin({
        filename: 'styles.bundle.js'
    }),
    new PurifyCSSPlugin({
        paths: glob.sync([
            path.join(__dirname, 'src', 'index.html'),
        ])
    }),
    // other plugins
]

我需要做什么才能使其工作？我被困在这个问题上，无法让它工作。

4

1 回答 1

1

您可以尝试在 Angular CLI 之上添加另一个构建工具（Gulp 或 Grunt），并在 Angular CLI 构建完成后触发特定任务。这将帮助您避免弹出并处理您正在处理的此类错误。除此之外，如果 Angular 团队决定调整 webpack 配置甚至迁移到新的构建工具，你很可能会再次遇到同样的问题。

我专门写了一篇关于这个主题的文章，其中我提供了 Grunt 和 Gulp 的说明和配置。他们都完美地工作。

如何在 Angular 项目中删除不必要的 CSS

于 2018-07-16T13:11:09.813 回答