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

Question

.css我正在为和文件设置 Webpack 加载器配置.scss，我注意到在使用时--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-loaderwithnode-sass和mini-css-extract-plugin将CSS提取到单独的文件中，这建议使用optimize-css-assets-webpack-plugin通过覆盖来最小化CSS optimization.minimizer，但我已经在不安装此插件的情况下获得了最小化输出。

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

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

Answer 1

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

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

对于 minify css 我推荐插件css-nano。它的设置很灵活。与 合作很好postcss-loader。

Answer 2

根据webpack 文档，

默认情况下，webpack v4+ 将在生产模式下缩小代码。

所以它并没有sass-loader进行缩小，只是删除意味着 webpack 不会将您的 SCSS 处理为 CSS，因此不会创建要缩小的文件。

我想说，如果您对简单的缩小感到满意，那么默认值可能适合生产。其他工具可能会让您更好地控制最终输出，包括源映射、删除重复规则、转储旧前缀等。