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

【问题标题】：Why Webpack's sass-loader is minimizing CSS in production mode?为什么 Webpack 的 sass-loader 在生产模式下最小化 CSS？
【发布时间】：2019-12-30 16:47:57
【问题描述】：

我正在为 .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 吗？

【问题讨论】：

标签： css webpack sass-loader

【解决方案1】：

根据webpack docs，

webpack v4+ 会默认在生产模式下压缩你的代码。

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：