如何为 CSS 缩小配置 cssnano？

Question

我正在尝试为postcss-loader 配置cssnano 插件，它会缩小CSS，非常相似，如here 所述。

Webpack 配置：

...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: () => [
                cssnano({
                  preset: ['default', {
                    discardComments: {
                      removeAll: true,
                    },
                    // how to find index of all available options?
                  }]
                })
              ]
            }
          },
          'sass-loader'
        ]
      }
    ]
  },

...

Here 列出了 cssnano 文档中的所有优化

here 是一个示例，说明如何在 default 预设之上覆盖单个优化 discardComments。

是否可以单独覆盖每个优化配置，例如 discardComments？这在为开发和生产创建单独的配置时非常方便。

另外，this repo 是一个不成功的尝试，带有最少的示例和样板。

编辑：cssnano 开发人员告诉无法单独配置每个优化，相反，可以单独使用每个优化插件source

Answer 1

将cssnano 与postcss-loader 和mini-css-extract-plugin 一起使用并不是Webpack 中缩小的最佳选择，因为该设置会缩小单个源文件而不是整个发出的CSS 文件（它有多余的空格）。最好的选择是使用optimize-css-assets-webpack-plugin。

安装它：

npm install --save-dev optimize-css-assets-webpack-plugin

然后使用将它添加到您的 Webpack 配置中：

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

...

  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, 
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: [] // Don't add cssnano here. Remove the loader completely if you have no plugins.
            }
          },
          'sass-loader'
        ]
      }
    ]
  },
  optimization: {
    minimizer: [
      new OptimizeCSSAssetsPlugin({
        // cssnano configuration
        cssProcessorPluginOptions: {
          preset: ['default', {
            discardComments: {
              removeAll: true
            }
          }],
        },
      })
    ]
  }

...

cssnano 选项索引：https://cssnano.co/optimisations/

但是如果你使用style-loader而不是mini-css-extract-plugin，你应该使用postcss-loader和cssnano，因为optimize-css-assets-webpack-plugin只优化发出的CSS文件。

Answer 2

你可以查看我的完整配置here

实际上我每次在开发模式下构建时都使用webpack shell plugin 运行 postcss 命令

plugins: [
        new WebpackShellPlugin({
            onBuildStart: ['echo "Starting postcss command"'],
            onBuildEnd: ['postcss --dir wwwroot/dist wwwroot/dist/*.css']
        })
    ],

所以它的作用是当构建完成后，postcss 命令将启动以缩小 wwwroot/dist 中的 css 文件

Answer 3

please find following steps to creat that
Minimize CSS files with cssnano
wpack.io uses postcss-loader and thereby PostCSS. So we can take advantage of it to minify our CSS/SASS files during production builds.

1
Install and use cssnano
npm i -D cssnano
or with 
yarn add --dev cssnano
2
Edit postcss.config.js file
/* eslint-disable global-require, import/no-extraneous-dependencies */
const postcssConfig = {
    plugins: [require('autoprefixer')],
};

// If we are in production mode, then add cssnano
if (process.env.NODE_ENV === 'production') {
    postcssConfig.plugins.push(
        require('cssnano')({
            // use the safe preset so that it doesn't
            // mutate or remove code from our css
            preset: 'default',
        })
    );
}

module.exports = postcssConfig;
Save it and you are good to go.