无法取消 Webpack CSS 输出

Question

出于某种原因，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: [
  ],
};

Answer 1

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

重新配置您的 Webpack 配置：

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

无法取消 Webpack CSS 输出

Unable to deminify Webpack CSS output

css

minify

webpack