0

我在用着

  • 网络包 4
  • postcss加载器
  • cssnano
  • 迷你 CSS 提取插件

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

还有一个带有另一个 css 导入的 index.js 文件：

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 文件]，但我对 .css 文件使用相同的 postcss-loaders，所以我不明白为什么它对它们不起作用？

4

1 回答 1

1

我将缩小步骤移至OptimizeCSSAssetsPlugin：

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

也应该节省一些额外的字节，因为它可以一次处理整个包，但我仍然想知道是什么导致某些文件无法处理。

于 2020-04-06T01:04:09.547 回答