Question

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

使用AngularCli ng new my-project
弹出webpack配置ng eject
安装PurifyCss npm 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
]

我需要做些什么才能让它发挥作用？我坚持这个，不能让它发挥作用。

Answer 1

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

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

How to remove unnecessary CSS in your Angular project

使用带有Angular 4的purifycss

1 个答案: