为什么 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 来最小化 CSS 通过覆盖 optimization.minimizer，但我已经在不安装此插件的情况下获得最小化输出。

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

的选项

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

Answer 1

根据webpack docs,

webpack v4+ will minify your code by default in production mode.

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

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

Answer 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.

很好用

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

Why Webpack's sass-loader is minimizing CSS in production mode?

css

webpack

sass-loader