Webpack找不到SVG CSS背景的路径 [英] Webpack not finding path of SVG CSS backgrounds

问题描述

PNG文件运行正常:

  .marker {背景:url(../assets/marker.png) 

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

  .marker {背景:url(../assets/marker.svg) 

我得到这个:第1栏第1行的错误:文档为空.换句话说，Webpack无法找到SVG文件的路径，并生成类似以下内容的文件: data:image/svg + xml; base64，bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIyOWN2YYZYY1NYY1YYZ1YYZYY1YZ

当我使用绝对路径时，它确实起作用:

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

这是为什么?

注意:这是我的Webpack文件，如下所示:

  var path = require('path')module.exports = {入口: {应用:"./src/main.js"}，输出: {路径:path.resolve(__ dirname，'../dist/static')，publicPath:'/static/'，文件名:"[name] .js"}，解决: {扩展名:[''，'.js'，'.vue'，'styl']，别名:{'src':path.resolve(__ dirname，'../src')}}，resolveLoader:{根目录:path.join(__ dirname，'node_modules')}，模块: {预加载器:[{测试:/\.vue $/，加载器:"eslint"，排除:/node_modules/}，{测试:/\.js $/，加载器:"eslint"，排除:/node_modules/}]，装载机:[{测试:/\.vue $/，加载器:"vue"}，{测试:/\.js $/，装载者:"babel"，排除:/node_modules/}，{测试:/\.json $/，加载程序:"json"}，{测试:/\.(png|jpg|gif|svg)$/，加载器:"url"，询问: {限制:10000，名称:"[名称].[ext]?[哈希:7]"}}，{测试:/\.css $/，loader:"style-loader！css-loader"}，{测试:/\.styl$/，加载器:'style-loader！css-loader！stylus-loader'}，{测试:/\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/，加载程序:"url-loader?limit = 10000& minetype = application/font-woff"}，{测试:/\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/，loader:文件加载器"}]}，随行附寄:{格式化程序:require('eslint-friendly-formatter')}} 

(为了使SVG文件能够在CSS背景下工作，我是否需要在此处进行一些更改?)

解决方案

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

The PNGs files works fine:

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

But when I change them to an SVG background:

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

I get this: error on line 1 at column 1: Document is empty. In other words, Webpack can't find the path of the SVG file, generating something like this: data:image/svg+xml;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICIyOWE3OGMyODg0ZWQyNjFhYTFjOWM1MjYxY2I1MTViZi5zdmciOw==

It does work when I use an absolute path:

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

Why is this?

Note: this is now my Webpack file looks like:

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

(Do I have to change something here to make SVG files work in CSS backgrounds?)

解决方案

I would suggest using inline-svg-loader instead of file-loader for svg files.

这篇关于Webpack找不到SVG CSS背景的路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！