如何在vue-cli 3中添加cssnano优化规则？

Question

我正在尝试添加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配置中包含的插件列表。一   其中的一个叫做“ optimize-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]
    })
  }
}

     

未经测试，所以不能保证：wink：

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