webpack / cssnano не сжимает все файлы CSS?

я использую

  • webpack 4
  • postcss-загрузчик
  • cssnano
  • плагин mini-css-extract

Конфигурация postcss / cssnano выглядит так:

    {
        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;
            },
        }
    },

Загрузчики выглядят так:

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

У меня есть index.less файл, который выглядит так:

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

И файл index.js где-нибудь с другим импортом css:

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

Полученный файл css выглядит так:

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

Я пытаюсь понять, почему некоторые исходники не являются несжатыми?

Я подумал, что, может быть, это все те, что находятся в node_modules, которые были распакованы, но markons.css не находится в node_modules. Тогда я подумал, может быть, это файлы CSS (файлы LESS сжаты). Это кажется последовательным [обнаружено несколько файлов CSS, которые СЖАТИЕ], но я использую те же загрузчики postcss для файлов .css, поэтому я не понимаю, почему это не сработает с ними?


webpack mini-css-extract-plugin postcss minify cssnano
person mpen    schedule 06.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я переместил шаг минимизации в OptimizeCSSAssetsPlugin:

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

Следует также сэкономить несколько дополнительных байтов, потому что он может обрабатывать весь пакет сразу, но я все же хотел бы знать, из-за чего некоторые файлы не обрабатываются.

person mpen    schedule 06.04.2020