1

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

网络包配置：

...

  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 文档中的所有优化

这是一个如何在预设discardComments之上覆盖单个优化的示例。default

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

此外，在此 repo中，尝试使用最少的示例和样板进行了不成功的尝试。

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

4

3 回答 3

3

在 Webpack 中使用cssnanowithpostcss-loader和并不是缩小的最佳选择，因为设置会缩小单个源文件而不是整个发出的 CSS 文件（它有多余的空格）。mini-css-extract-plugin最好的选择是使用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-loaderwithcssnano因为optimize-css-assets-webpack-plugin只优化发出的 CSS 文件。

于 2019-12-03T05:00:25.573 回答
1

你可以在这里查看我的完整配置

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

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

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

于 2019-12-03T04:44:47.707 回答
0 
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.
于 2019-12-03T00:40:04.693 回答