Vue CLI3にて、vue-svg-loaderとfile-loaderを共存させる。

経緯

久々の投稿。
今までfontawesome使ってたけど
デザイナーさんがsvgでアイコンくれたので、vue-svg-loader使ってsvgをコンポーネント化して扱ってみようと思った。
で、調べる。
ほうほう、vue.config.jsにchainWebpackで

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
};

を追記すれば良いのか。https://vue-svg-loader.js.org/#vue-cli

分かる分かる。意味わかる。おっしゃ。やってみるわ。
がしかし、、既存のコードで読み込めないsvgが出て来ました。今まで読めてたやつが。。。

こんなやつ。scssファイル上のchecked擬似クラスでsvgを読んでる箇所。

input[type=radio] {
  ・・・・
  &:checked {
    background-image: url(/・・・/xxxx.svg);
  }
}

これ書いたん俺?? まーいーや。とりあえず置いといて、、
↑のradioもvue-svg-loaderで認識されるように、修正するか。
いや、それって本末転倒よな、うっざ。どないしよ。。
とりあえずvue-cli3の元々のwebpackの設定とか見てみよ。そして落ち着こ。

原因を探す

これやな。
./node_modules/@vue/cli-service/lib/config/base.js

 webpackConfig.module
   .rule('svg')
   .test(/\.(svg)(\?.*)?$/)
   .use('file-loader')
   .loader('file-loader')
   .options({
     name: genAssetSubPath('img')
   })

なるほどー、今までsvgはfile-loaderで認識させてたのが、
vue.config.jsで追記した

svgRule.uses.clear();

でリセットされてるのかー、なるほど。じゃ、どないしよ。。。
既存の設定は活かしつつ、vue-svg-loaderも使う方法はないもんか？？？？調べよ。

あったー

faqのところ
https://vue-svg-loader.js.org/faq.html#how-to-use-both-inline-and-external-svgs

webpackとVue CLIとnuxtで分けてあった。

しかしwebpackの設定でoneOfってのがあるのか、
しらなんだ。なるほどー、これ使うと両方のloaderを使えるのか、
よし、vue.config.jsを書き換えよう。

俺の場合はこうした。

module.exports = {
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');
    svgRule.uses.clear();
    svgRule
      .oneOf('external')
      .resourceQuery(/external/)
      .use('file-loader')
      .loader('file-loader')
      .end()
      .end()
      .oneOf('inline')
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
  ・・・・

つまりsvgファイルにexternalクエリがあるものはfile-loaderを使用し、
それ以外はvue-svg-loaderを使用する。

なので、checkedの擬似クラスで読み込んでいるsvgファイルにexternalという名前のクエリをつけた

background-image: url(・・・.svg?external);

これで既存のコードで読み込まれているsvgファイルはそのまま使用出来て、
新しいsvgファイルをvue-svg-loader使ってコンポーネント化出来ました。
まぁexternalという名前じゃなくてもええんやろけど。

とりあえずはこれでいく。
よし、これでいこ。