Vue CLI 3 - Remove SVGO from cssnano optimizations

vue-cli

#1

I’ve got a pretty standard Vue CLI 3 project created, and I’m trying to use the Clarity library’s css (https://clarity.design/).

Everything works fine in development, but when I call npm run build I get the following error:

 ERROR  Error: CSS minification error: postcss-svgo: Error in parsing SVG: Invalid character in tag name
        Line: 0
      Column: 5
Char: +. File: css/app.931b2a01.css

So, as I understand it, Vue CLI uses Post-CSS which uses the cssnano plugin, which calls svgo to try to minimize an embedded SVG in the an icon in Clarity.

It looks like I can exclude that optimization from cssnano according to this (https://cssnano.co/guides/presets/#excluding-transforms), but I’m not seeing how I can pass in the cssnano presets into the vue cli configuration.

Looking through the Vue CLI source it looks like it specifies a cssnano preset, but I’m not seeing any path the pass in configuration to that preset.

Any ideas? Should I open an issue on github?


#2

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:


#3

That worked great. I appreciate the help.