Question

我在删除webpack 4中未使用的CSS时遇到问题。似乎大多数CSS纯化插件都依赖于未在版本4中更新的提取文本插件。

这是我的命令：

node_modules / .bin / webpack --mode = development --env.operation = separateCSS

OR

node_modules / .bin / webpack --mode = development --env.operation = bundleCSS

这是我的webpack.config.js的一部分：

            rules: [
            // Loader for SASS files
            {
                test: /\.s[ac]ss$/,
                use: [
                    // Use IIFE to choose how to emit the CSS: 1. Extract as separate file 2: Bundle with the JS file
                    (() => { return env.operation == "separateCSS" ? MiniCssExtractPlugin.loader : 'style-loader'; })(),
                    { loader: 'css-loader', options: { importLoaders: 1, url: true } },
                    {
                        loader: 'postcss-loader',
                        options: {
                            ident: 'postcss',
                            plugins: [
                                // Write future-proof CSS and forget old preprocessor specific syntax. Use the latest CSS syntax today with cssnext. 
                                // It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
                                // It parses CSS and add vendor prefixes to CSS rules using values from Can I Use.
                                // https://github.com/MoOx/postcss-cssnext
                                require('postcss-cssnext')()
                            ]
                        }
                    },
                    'sass-loader'
                ]
            }
           ],
            plugins: [
            new MiniCssExtractPlugin({
                filename: "../css/[name].css"
            })
           ]

有谁知道如何修改我的配置文件，以便webpack可以删除未使用的CSS？

Answer 1

您是否考虑过使用 uncss 之类的东西。有一个webpack插件。它将浏览所有CSS，并将其与HTML进行比较，并删除所有您不使用的内容。

看看：WebPack UnCSS

如何使用webpack 4删除未使用的CSS？

1 个答案: