为什么在生产模式下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呢？

- Pierre

Answer 1

sass-loader选项中的outputStyle参数确定了最终CSS样式的输出格式。
默认值为：嵌套。
有关更详细的信息，请参阅https://github.com/sass/node-sass#outputstyle
要禁用压缩，请将此选项设置为expanded：

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

我推荐使用插件css-nano来压缩CSS。它的设置很灵活，可以很好地与postcss-loader协同工作。

- Bluorenge

Answer 2

根据 webpack 文档，在生产模式下，webpack v4+ 默认会压缩你的代码。因此并不是 sass-loader 进行了代码压缩，只是如果移除它，webpack 就无法将你的 SCSS 处理成 CSS，并且不会生成可被压缩的文件。如果你对简单的代码压缩满意，那么默认设置在生产环境下应该已经足够了。其他工具可能会提供更多控制输出的选项，包括源映射、删除重复规则、删除旧的前缀等。

- Bryce Howitson