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背景工作?)
嘗試從'file-loader'(最後一個)中刪除'svg'。 –