无法缩小 Webpack CSS 输出答案

【问题标题】：Unable to deminify Webpack CSS output无法缩小 Webpack CSS 输出
【发布时间】：2020-01-14 13:26:50
【问题描述】：

由于某种原因，Webpack 和相关的插件和模块拒绝以非缩小的方式输出我的 Sass/CSS。我已经在网上寻找可能的解决方案或简单的配置参数，但我真的找不到任何关于此事的信息。我觉得这很奇怪，因为在我看来这是一个非常简单的设置。

main.scss（输入）

.example {
   display: grid;
   transition: all .5s;
   user-select: none;
   background: linear-gradient(to bottom, white, black);
}

styles.css（输出）

.example{display:grid;transition:all .5s;user-select:none;background:linear-gradient(to bottom, white, black)}

Webpack 配置（简化）

module.exports = {
    mode: 'development',
    optimization: {
        minimize: false,
    },
    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'styles.css',
        }),
    ],
};

postcss.config

module.exports = {
  plugins: [
  ],
};

【问题讨论】：

所以出于好奇我问你为什么不想最小化从 scss 到 css 的 css 转换结果？
能够使构建的 CSS 对人类可读。它知道这是不合适的，但此时需要它。

标签： css webpack minify

【解决方案1】：

最后我解决了。我之前只是在没有“sassOptions”的情况下尝试过同样的事情。

像这样重新配置你的 Webpack 配置：

{
    loader: 'sass-loader',
    options: {
        sassOptions: {
            outputStyle: 'expanded',
        },
   },
},

【讨论】：