使用角为4的净空

Question

我试着用PurifyCss的角度( webpack)，但是到目前为止，这个过程还没有成功.我正在开发环境中尝试这个，基本上我所做的是：

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

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

你应该把它和摘录-文本-webpack-插件一起使用。

但是当我尝试添加这个时，我总是会出错。我不知道这是因为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

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

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

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