如何为CSS小型化配置cssnano？

Question

我试图配置cssnano插件的postcss-loader，这是微型CSS，非常类似，如描述的这里。

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'
        ]
      }
    ]
  },

...

这里列出了cssnano文档中的所有优化。

这里是一个例子，说明了如何在default预设的基础上覆盖单个优化discardComments。

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

另外，在这个回购中是一次失败的尝试，只有极小的例子和样板。

编辑：cssnano告诉我们不可能单独配置每个优化插件，相反，可以单独使用每个优化插件来源。

Answer 1

在Webpack中，使用cssnano和postcss-loader和mini-css-extract-plugin并不是缩小的最佳选择，因为设置缩小了单个源文件，而不是整个发出的CSS文件(它有多余的空白)。最好的选择是使用优化-css-资产-webpack-插件。

安装：

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，则应该在cssnano中使用postcss-loader，因为optimize-css-assets-webpack-plugin只对发出的CSS文件进行优化。

Answer 2

您可以查看我的完整配置这里。

实际上，每次在dev模式下构建时，我都使用webpack外壳插件运行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.