webpack提取vue文件中的css到独立的文件中

Question

使用了extract-text-webpack-plugin插件，通过require引入的css文件可以打包成独立的文件并在页面中引入，但是vue文件中的css还是被打包到js中了

module: {
    loaders: [
        { test: /\.vue$/, loader: 'vue' },
        { test: /\.js$/, loader: 'babel', exclude: /node_modules/ },
        { test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader','css-loader?sourceMap!autoprefixer-loader') },
        { test: /\.scss$/, loader: 'style!css!sass?sourceMap' },
        { test: /\.(gif|png|jpg)$/, loader: 'url-loader?limit=8192&name=img/[name].[hash:16].[ext]' },
        { test: /\.(html|tpl)$/, loader: 'html-loader' }
    ]
},
plugins: [
    new ExtractTextPlugin('css/[name].css', { allChunks: true }),        // 提取css
]

google出来的都是说用extract-text-webpack-plugin插件就可以了，但是试了好多次还是不行，请问有人遇到过同样的情况吗？

Answer 1

vue-loader有一堆默认配置，包括如何使用什么loader去处理vue文件内的<template> <script> <style>。
所以结论是你需要在vue-loader配置内声明使用extract-text-webpack-plugin处理<style>的内容。