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

【问题标题】：How do I add cssnano optimization rules in vue-cli 3?如何在 vue-cli 3 中添加 cssnano 优化规则？
【发布时间】：2019-01-31 13:01:44
【问题描述】：

我正在尝试添加 cssnano 优化规则，但使用 vue-cli，它似乎不起作用。我在vue.config.js中添加了以下脚本：

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

但它不起作用（见下面的截图）

屏幕截图 - cssnano mergeRules 不适用：

我错过了什么？

【问题讨论】：

标签： vue.js webpack vue-cli vue-cli-3 cssnano

【解决方案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 配置。您还可以在 cmets 中获得有关如何导航到它的信息 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

【讨论】：