Vue-loader: 使用 Extracting CSS into a Single File后 异步加载的组件的样式无法加载

[loopnz]

使用Extracting CSS into a Single File后，只能抽出同步组件app.vue的css,
异步加载的home.vue的样式无法加载。

webpack.config.js

module.exports={
entry:{
app:"./src/app.js"
},
output:{
path:"./dist"
},
module:{
loaders:[
{
test:/.vue$/,
loader:'vue'
}
]
},
vue:{
loaders: {
css: ExtractTextPlugin.extract("css")
}
},
plugins:[
new ExtractTextPlugin('[name].css')
]
}

app.js
var Vue = require('vue')
Vue.config.debug = true;
var VueRouter = require('vue-router')
Vue.use(VueRouter);

var app =require('./app.vue');

var router = new VueRouter({
hashbang: true
})

router.map({
'/home': {
component: function(resolve){
require(['./views/home.vue'],resolve);
}
}
})

app.vue

home.vue

[yijian166]

不知道这个问题怎么解决的？

[loopnz]

没解决

[ablipan]

这样做

vue: {
        loaders: {
            css: ExtractTextPlugin.extract('vue-style-loader', 'css')
        }
}

[airwin]

我遇到个问题是，npm run build 后，css并没有extract成单独的.css文件，而是打包在了js中，请问有人遇到过吗？

[ablipan]

@airwin 建议参考 vue-cli 生成的 webpack 项目配置

[airwin]

@ablipan 谢谢，后来发现在.vue中通过style标签import的css才能extract，在.js中import的不行

[dongyuanxin]

@yijian166 @loopnz @ablipan @airwin

🍰 可以这样配置(仅供参考)：点我传送