web-dev-qa-db-fra.com

Vue Cli 3 ne me permet pas de traiter les SVG dans Webpack

La valeur par défaut de Vue Cli est file-loader pour les ressources SVG, mais je souhaite utiliser plutôt svg-Sprite-loader (ainsi que quelques autres).

J'ai mis à jour le fichier vue.config.js pour le faire et il semble toujours utiliser file-loader. Presque comme si ça ne prenait pas ma config du tout.

vue.config.js 

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.(svg)(\?.*)?$/,
          use: [
            {
              loader: 'svg-Sprite-loader',
              options: {
                name: '[name]-[hash:7]',
                prefixize: true
              }
            },
            'svg-fill-loader',
            'svgo-loader'
          ]
        }
      ]
    }
  }
}

Y a-t-il un problème avec ma configuration?

Les fichiers SVG sont toujours importés dans mon composant sous forme de chaîne/chemin d'URL alors qu'il devrait s'agir d'un objet avec des propriétés.

Merci beaucoup.

javascriptwebpackvue.jsvuejs2vue-cli
4
Michael Giovanni Pumo

Cela m'a pris un certain temps pour trouver un travail autour. En gros, vous devez arrêter la correspondance du chargeur de fichiers sur .svg. La meilleure façon de procéder consiste à utiliser chainWebpack et à renvoyer false à partir de la méthode de test sur le chargeur de fichiers. J'ai inclus ma configuration de travail.

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')
  }
}

5
Dom Walker

La documentation Webpack pour la version bêta de Vue CLI 3.0 a été mise à jour avec un exemple sur la manière de remplacer un chargeur de base existant . Pour svg-Sprite-loader, cela signifie que vous devrez ajouter la configuration suivante à votre vue.config.js:

chainWebpack: config => {
  config.module
    .rule('svg')
    .use('file-loader')
    .loader('svg-Sprite-loader')
}
2
eay

J'utilise Vue CLI 3.0.3 et cette configuration fonctionne pour moi ????

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'
      })
  }
};
1
ChucKN0risK