Vue Cli 3 is not allowing me to process SVG's in Webpack
This took me a while to find a work around. Basically you need to stop file-loader matching on .svg. The best way I have found to do this is using chainWebpack and returning false from the test method on file-loader. I have included my working config.
module.exports = { lintOnSave: false, configureWebpack: { module: { rules: [ { test: /\.(svg)(\?.*)?$/, use: [ { loader: 'svg-inline-loader', options: { limit: 10000, name: 'assets/img/[name].[hash:7].[ext]' } } ] } ] } }, chainWebpack: config => { config.module .rule('svg') .test(() => false) .use('file-loader') }}
The Webpack docs for Vue CLI 3.0 beta got updated with an example on how to replace an existing Base Loader. For svg-sprite-loader this means that you'll have to add the following configuration to your vue.config.js:
chainWebpack: config => { config.module .rule('svg') .use('file-loader') .loader('svg-sprite-loader')}
I'm using Vue CLI 3.0.3 and this config works for me 😉
const path = require('path');const glob = require('glob');const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');module.exports = { lintOnSave: false, configureWebpack: { plugins: [ new SpriteLoaderPlugin() ] }, chainWebpack: config => { config.module.rules.delete('svg'); config .entry('app') .clear() .add(path.resolve(__dirname, './src/main.ts')) config .entry('sprite') .add(...glob.sync(path.resolve(__dirname, `./src/assets/icons/*.svg`))); config.module.rule('svg') .test(/\.(svg)(\?.*)?$/) .use('file-loader') .loader('svg-sprite-loader') .options({ extract: true, spriteFilename: 'icons.svg' }) }};