使用webpack，vue文件导入样式文件报错

项目结构如下所示：



webpack的配置文件代码如下所示：

var webpack = require("webpack");
module.exports = {
entry: './resource/js/app.js',
output: {
path: '',
filename: "./index.js"
},
module: {
loaders: [
{test:/\.css$/,loader:'style-loader!css-loader'},
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
{test: /\.vue$/,loader: 'vue'},
{test: /\.(png|jpg|gif|svg)$/,loader: 'file?name=[name].[ext]?[hash]'},
{
test: /\.(png|jpg)$/,
loader: 'url?limit=40000'
},
{
test: /\.jsx?$/,
loader: 'babel',
query: {
presets: ['es2015']
}
}
]
},
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
};

在login_header.vue里面导入js及index.css文件，代码如下所示：
<template>
<div class="nav">
<div class="nav-slider js-slider">
<a class="active" v-on:click="register">注册</a>
<a v-on:click="login">登录</a>
<span class="nav-slider-bar"></span>
</div>
</div>
</template>
<script>
require('../resource/js/common.js');
require('../resource/css/index.css');
export default {
methods:{
register: function(){
$('.js-slider').removeClass('nav-slider-l').find('a').eq(0).addClass('active').siblings('a').removeClass('active');
location.href = '#register';
},
login: function(){
$('.js-slider').addClass('nav-slider-l').find('a').eq(1).addClass('active').siblings('a').removeClass('active');
location.href = '#login';
}
}
}
</script>

在命令行里面运行webpack命令，一直报错，如下所示：



经检查，发现是样式文件里面的url导致此错误