Adding a custom loader in a Vue CLI app

A project required me to add a custom loader called SVG sprite loader. I placed the loader code inside vue-config.js, but was suprised to see the loader not getting applied.

The reason was due to Vue CLI already providing a Webpack rule for SVG images. To know what rules are already added, Vue CLI provides the inspect command.

In my case I used vue inspect --rule svg to get the rule for SVGs:

{
  test: /\.(svg)(\?.*)?$/,
  use: [
    /* config.module.rule('svg').use('file-loader') */
    {
      loader: 'file-loader',
      options: {
        name: 'img/[name].[hash:8].[ext]'
      }
    }
  ]
}

If you want to see all the rules, I recommend outputting the list into a file, instead of the terminal, by using vue inspect > output.js.

So how do you make sure your rule gets applied? You first will need to clear the default rule before your loader:

module.exports = {
  chainWebpack: config => {
    /* Remove the default rule */
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    /* Custom SVG loader */
    svgRule
      .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .tap(options => {
          const newOptions = {
            symbolId: '[name][hash]'
          };

          return { ...options, ...newOptions };
        })
        .end()
  },
}