css - 为什么 Webpack 的 sass-loader 在生产模式下最小化 CSS？

Question

我正在为 .css 和 .scss 文件设置 Webpack 加载器配置，我注意到在使用 --mode production 时我'我将最小化的 CSS 作为最终输出，甚至没有明确使用最小化器，这是我的加载器配置:

{
  // Match .css or .scss
  test: /\.s?css$/,
  use: [
    isProd
    // In production extract the CSS into separate files
    ? {
      loader: MiniCssExtractPlugin.loader,
      options: {
        hmr: !isProd
      }
    }
    // In development inject the styles into the DOM
    : 'style-loader',
    {
      loader: 'css-loader'
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: false
      }
    }
  ]
}

我正在使用 sass-loader 与 node-sass 和 mini-css-extract-plugin 将 CSS 提取到单独的文件中，这建议使用 optimize-css-assets-webpack-plugin 通过覆盖 optimization.minimizer 来最小化 CSS，但我已经在不安装此插件的情况下获得最小化输出。

为了找到导致此行为的原因，我尝试使用和不使用 sass-loader 处理 CSS 文件，我发现 sass-loader 可能导致此行为，但它不会' 有最小化 CSS 的任何选项。

那么是什么导致了这种行为？如果我的 CSS 文件已最小化，我还需要 optimize-css-assets-webpack-plugin 吗？

Answer 1

sass-loader options中的option outputStyle决定了最终CSS样式的输出格式。
默认:nested。
更多详情https://github.com/sass/node-sass#outputstyle
要禁用缩小，请将此选项设置为 expanded:

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

对于缩小 css，我推荐插件 css-nano。它的设置很灵活。与 postcss-loader 配合使用效果很好。