vue.js - 如何在 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 插件选项。

Run these commands:

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

This gives you a list of plugins included in our webpack config. One of them is called 'optimize-css'

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

Now you get the config for that plugin, including the cssnano config. You also get info in the comments about how to navigate to it through webpack-chain.

With that information, we can now use the chainWebpack api to edit the plugin options:

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

Untested, so no guarantees :wink:

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