Webpack 找不到 SVG CSS 背景的路径

Question

PNGs 文件工作正常：

.marker {
  background: url(../assets/marker.png)

但是当我将它们更改为 SVG 背景时：

.marker {
  background: url(../assets/marker.svg)

我明白了：error on line 1 at column 1: Document is empty。也就是说，Webpack 找不到 SVG 文件的路径，生成类似这样的东西：data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIyOWE3OGMyODg0ZWQyNjFhYTFjOWM1MjYxY2I1MTViZi5zdmciOw==

当我使用绝对路径时它确实有效：

.marker {
  background: url(http://istaging.co/api/marker.svg)

这是为什么？

注意：这是我现在的 Webpack 文件的样子：

var path = require('path')

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: path.resolve(__dirname, '../dist/static'),
    publicPath: '/static/',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['', '.js', '.vue', 'styl'],
    alias: {
      'src': path.resolve(__dirname, '../src')
    }
  },
  resolveLoader: {
    root: path.join(__dirname, 'node_modules')
  },
  module: {
    preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        exclude: /node_modules/
      }
    ],
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
      {
        test: /\.js$/,
        loader: 'babel',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: 'json'
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        query: {
          limit: 10000,
          name: '[name].[ext]?[hash:7]'
        }
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'url-loader?limit=10000&minetype=application/font-woff'
      },
      {
        test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file-loader'
      }
    ]
  },
  eslint: {
    formatter: require('eslint-friendly-formatter')
  }
}

（我是否必须在此处更改某些内容才能使 SVG 文件在 CSS 背景中工作？）

Answer 1

我建议对 svg 文件使用 inline-svg-loader 而不是 file-loader。