我试图添加cssnano优化规则,但使用vue-cli,它似乎不起作用。我在vue.config.js
中添加了以下脚本:
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require("cssnano")({
preset: [
"default",
{
discardComments: {
removeAll: true
},
mergeRules: true
}
]
})
]
}
}
}
};
但它不起作用(见下面的截图)
截图 - cssnano mergeRules
不适用:
我错过了什么?
你必须修改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-chain导航到它的信息。
有了这些信息,我们现在可以使用chainWebpack api编辑插件选项:
// vue.config.js module.exports = { chainWebpack: config => { config.plugin('optimize-css').tap(([options]) => { options.cssnanoOptions.preset[1].svgo = false return [options] }) } }
未经测试,所以没有保证:眨眼:
资料来源:https://forum.vuejs.org/t/vue-cli-3-remove-svgo-from-cssnano-optimizations/53560/2