如何在VUE-CLI 3添加cssnano优化规则？(How do I add cssnano op

我想补充cssnano优化规则但VUE CLI，它似乎并没有工作。 我在添加下面的脚本vue.config.js ：

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require("cssnano")({
            preset: [
              "default",
              {
                discardComments: {
                  removeAll: true
                },
                mergeRules: true
              }
            ]
          })
        ]
      }
    }
  }
};

但它不会工作（见下面的截图）

截图- cssnano mergeRules并不适用：

我错过了什么？

Answer 1:

您必须修改chainWebpack API编辑cssnano插件选项。

运行以下命令：

 npx vue-cli-service inspect --mode=production --plugins 

这使您可以包含在我们的WebPack配置的插件列表。 其中之一是所谓的“优化CSS的”

 npx vue-cli-service inspect --mode=production --plugin optimize-css 

现在您可以配置该插件，包括cssnano配置。 您还可以在如何通过的WebPack链定位到它的评论信息。

有了这些信息，我们现在可以使用chainWebpack API编辑插件选项：

 // vue.config.js module.exports = { chainWebpack: config => { config.plugin('optimize-css').tap(([options]) => { options.cssnanoOptions.preset[1].svgo = false return [options] }) } } 

未经检验的，所以不能保证：眨眼：

来源： https://forum.vuejs.org/t/vue-cli-3-remove-svgo-from-cssnano-optimizations/53560/2

文章来源: How do I add cssnano optimization rules in vue-cli 3?