https://coneta.jp/article/show/2882 の続き ただ、`vue-svg-loader`を用いた読み込みと`file-loader`でimg等で読み込むパターンを併用したい場合、公式のリファレンスだと足りず少しWebpack設定をいじる必要がある。 vue.config.js ```javascript module.exports = { chainWebpack: (config) => { const svgRule = config.module.rule('svg') svgRule .oneOf('component') .resourceQuery(/component/) .use('vue-svg-loader') .loader('vue-svg-loader') .end() .end() svgRule.oneOf('normal').uses.merge(svgRule.uses.entries()) svgRule.uses.clear() }, }; ``` WebpackのoneOfを使うことで、特定のパターンの時に使うloaderを指定することができる。 上記の設定だと、デフォルトは`file-loader`で読み込み、 `@/assets/images/image.svg?component` といったようにクエリを指定することで`vue-svg-loader`として読み込むことができる。
2020/07/24 22:02:13

コメント (0)

あなたもコメントしてみませんか

アカウント新規作成(無料)

既にアカウントを持っている方は ログイン