如何在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服务检查-模式=生产-插件 这给你一个插件列表，包括在我们的webpack配置。其中一个被称为‘优化-css’。 npx vue-cli服务检查-模式=生产-插件优化-css 现在，您可以获得该插件的配置，包括cssnano。您还可以在评论中获得有关如何通过webpack链导航到它的信息。 有了这些信息，我们现在可以使用chainWebpack api来编辑插件选项： // vue.config.js module.exports ={ chainWebpack: config => {config.plugin(‘优化-css’).tap(选项) => {options.cssnanoptions.preset1.svgo= false返回选项}} 未经测试，所以没有保证:眨眼：

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