web-dev-qa-db-de.com

Mit Vue Cli 3 kann ich keine SVGs im Webpack verarbeiten

Vue Cli verwendet standardmäßig file-loader für SVG-Assets, aber ich möchte stattdessen svg-Sprite-loader (sowie einige andere) verwenden.

Ich habe die vue.config.js-Datei dazu aktualisiert und sie scheint immer noch file-loader zu verwenden. Fast so, als würde es meine Konfiguration überhaupt nicht aufnehmen.

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

Stimmt etwas mit meinem Setup nicht?

Ich bekomme immer noch SVG-Dateien in meine Komponente als URL-Zeichenfolge/-Pfad importiert, wenn es sich um ein Objekt mit Eigenschaften handeln soll.

Danke vielmals.

javascriptwebpackvue.jsvuejs2vue-cli
4
Michael Giovanni Pumo

Ich habe eine Weile gebraucht, um eine Arbeit zu finden. Grundsätzlich müssen Sie den Dateilader-Abgleich auf .svg beenden. Der beste Weg, dies zu tun, ist chainWebpack zu verwenden und false von der Testmethode auf file-loader zurückzugeben. Ich habe meine Arbeitskonfiguration eingefügt.

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

Die Webpack-Dokumente für die Beta-Version von Vue CLI 3.0 wurden mit einem Beispiel aktualisiert, wie ein vorhandener Base Loader ersetzt wird . Für svg-Sprite-loader bedeutet dies, dass Sie Ihrem vue.config.js die folgende Konfiguration hinzufügen müssen:

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

Ich verwende Vue CLI 3.0.3 und diese Konfiguration funktioniert für mich ????

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