Webpack配置未压缩scss文件

Question

我尝试压缩css和scss文件。我的webpack.config.prod.js将SCSS编译为CSS并捆绑到main.css中。但是，只有css文件在main.css中被压缩。我使用的是Webpack 4.33.0和mini-css-extract-plugin。

Webpack.config.js文件：

没有错误。

谢谢。

{
                test: /\.scss$/,
                use: [
                  {
                    loader: MiniCssExtractPlugin.loader
                  },
                  {
                    loader: "css-loader",
                    options: {
                      sourceMap: true,
                      modules: true,
                      localIdentName: "[local]___[hash:base64:5]"
                    }
                  },
                  "sass-loader"
                ]
              },
              {
                test: /\.(css)$/,
                use: [
                  {
                    loader: MiniCssExtractPlugin.loader
                  },
                  {
                    loader: "css-loader",
                    options: {
                      sourceMap: true,
                      modules: true,
                      localIdentName: "[local]___[hash:base64:5]"
                    }
                  },
                  {
                    loader: "postcss-loader",
                    options: {
                      ident: "postcss",
                      plugins: () => [
                        require("postcss-flexbugs-fixes"),
                        autoprefixer({
                          browsers: [
                            ">1%",
                            "last 4 versions",
                            "Firefox ESR",
                            "not ie < 9" // React doesn't support IE8 anyway
                          ],
                          flexbox: "no-2009"
                        }),
                        require("cssnano")({ preset: "default" })
                      ],
                      minimize: true
                    }
                  }
                ]
              }

      plugins: [
        new MiniCssExtractPlugin()
    ]

- guy diamond

Answer 1

我正在使用postcss，但是我有不同的配置，如下所示。

我正在使用OptimizeCSSAssetsPlugin来压缩CSS，然后每当我在scss文件中进行更改时，postcss将运行并使用WebpackShellPlugin对其进行混淆。

const path = require("path");
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const WebpackShellPlugin = require('webpack-shell-plugin');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
    output: {
        path: path.resolve(__dirname, "wwwroot/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },
    optimization: {
        minimizer: [
            new OptimizeCSSAssetsPlugin({
                cssProcessorOptions: {
                    safe: true,
                    discardComments: {
                        removeAll: true,
                    },
                },
            })
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        new WebpackShellPlugin({
            onBuildStart: ['echo "Starting postcss command"'],
            onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
        })
    ],
    module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }
};

- Tony Ngo

---

谢谢。现在可以工作了，但如果您想使用新的css-loader，则需要删除选项 - minimize: true。否则，您可能会遇到错误：ValidationError：CSS Loader Invalid Options。 - guy diamond