webpack/cssnano 没有压缩所有 CSS 文件？

Question

I'm using

• webpack 4
• postcss-loader
• cssnano
• mini-css-extract-plugin

The postcss/cssnano config looks like:

    {
        loader: 'postcss-loader',
        options: {
            sourceMap: true,
            plugins: loader => {
                const plugins = [
                    require('postcss-preset-env')(),
                ];
                if (nodeEnv === 'production') {
                    plugins.push(
                        require('cssnano')({
                            preset: ['default',
                                {
                                    discardComments: {
                                        remove: comment => !copyrightPatt.test(comment),
                                    },
                                }
                            ]
                        }),
                    );
                }
                return plugins;
            },
        }
    },

The loaders look like this:

      {
        test: /\.css$/,
        use: [
          '.../node_modules/mini-css-extract-plugin/dist/loader.js',
          {
            loader: 'css-loader',
            options: {
              modules: [Object],
              localsConvention: 'dashes',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true, plugins: [Function: plugins] }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          '.../node_modules/mini-css-extract-plugin/dist/loader.js',
          {
            loader: 'css-loader',
            options: {
              modules: [Object],
              localsConvention: 'dashes',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true, plugins: [Function: plugins] }
          },
          {
            loader: 'less-loader',
            options: { sourceMap: false, strictMath: true, strictUnits: true }
          }
        ],
        exclude: '.../src/resources/assets/scripts/components'
      },
      {
        test: /\.less$/,
        use: [
          '.../node_modules/mini-css-extract-plugin/dist/loader.js',
          {
            loader: 'css-loader',
            options: {
              modules: [Object],
              localsConvention: 'dashes',
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: { sourceMap: true, plugins: [Function: plugins] }
          },
          {
            loader: 'less-loader',
            options: { sourceMap: false, strictMath: true, strictUnits: true }
          }
        ],
        include: '.../src/resources/assets/scripts/components'
      },

I've got an index.less file that looks like this:

@import './anticon';
@import '~antd/lib/select/style/index.css';
.ant-select-dropdown-menu {
    margin: 0;
}
.anticon-down:before {
    content: none; 
}
@import 'forms.less';
@import 'tables.less';
@import '../markons/markons.css';
... more imports ...

And an index.js file somewhere with another css import:

require('trumbowyg/dist/ui/trumbowyg.css');

The outputted css file looks like:

my css, compressed
source of trumbowyg/dist/ui/trumbowyg.css, uncompressed
source of antd/lib/select/style/index.css, uncompressed
markons.css, uncompressed
more more my css, compressed

What I'm trying to figure out is why some of the sources aren't uncompressed?

I thought maybe it was all the ones under node_modules that were uncompressed, but markons.css is not under node_modules. So then I thought maybe it's the CSS files (LESS files are compressed). This seems consistent[found some CSS files that ARE compressed], but I'm using the same postcss-loaders for.css files, so I don't understand why it wouldn't work on them?

Answer 1

I moved the minifying step into OptimizeCSSAssetsPlugin :

        optimization: {
            minimizer: [
                new OptimizeCSSAssetsPlugin({
                    cssProcessor: require('cssnano'),
                    cssProcessorPluginOptions: {
                        preset: ['default',
                            {
                                discardComments: {
                                    remove: comment => !copyrightPatt.test(comment),
                                },
                            }
                        ]
                    },
                })
            ]
        }

Should save a few extra bytes too because it can process the entire bundle at once, but I'd still like to know what was causing some files to not be processed.