无法取消 Webpack CSS 输出

Question

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

main.scss(input(

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

样式.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',
},
},
},