2

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

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

但它不起作用(见下面的截图)

屏幕截图 - cssnanomergeRules不适用:

在此处输入图像描述

我错过了什么?

4

1 回答 1

5

您必须修改 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-chain 导航到它的信息。

有了这些信息,我们现在可以使用 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

于 2019-02-15T13:39:27.857 回答