2016-03-16 54 views
1

的PNG圖像文件的路徑正常工作:的WebPack沒有找到SVG CSS背景

.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背景工作?)

+0

嘗試從'file-loader'(最後一個)中刪除'svg'。 –

回答

1

我會建議使用inline-svg-loader代替svg文件的文件加載器。