scss提取 vue_vue.js - webpack 提取vue组件里的.scss文件，没有生成style.css？

问 题

项目里引入了bootstrap.css文件，可以将其分离提取出来，但是vue组件里的model.scss能编译成功，却无法提取出来，不知道是哪里出问题了。

这是config.js的配置文件

var webpack = require('webpack');

var path = require('path');

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {

devtool: 'eval-source-map',//配置生成Source Maps，选择合适的选项

entry: path.resolve(__dirname, 'src/index.js'),//已多次提及的唯一入口文件

output: {

path: path.resolve(__dirname, 'dist'),//打包后的文件存放的地方

filename: "bundle.js"//打包后输出文件的文件名

},

resolve: {

extensions: ['.js', '.vue', '.json'],

alias: {

'vue$': 'vue/dist/vue.esm.js',

'@': path.resolve(__dirname, 'src')

}

},

module: {

loaders: [

{

test: /\.vue$/,

loader: 'vue-loader'

},

{

test: /\.css$/,

use: ExtractTextPlugin.extract({

fallback:"style-loader",

use:"css-loader"

})

},

{

test: /\.less$/,

use: ExtractTextPlugin.extract({

fallback:"style-loader",

use:["sass-loader","css-loader"]

})

},

{

test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg)$/,

loader: 'url-loader?limite=8192' // limit 是转换base64的文件大小的阀值8兆

},

{

test: /\.html$/,

loader: 'html-loader' // 可以用来加载模板

}

],

},

plugins: [

new ExtractTextPlugin("styles.css"),

new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false

}

})

],

devServer: {

contentBase: path.resolve(__dirname,"dist"),//本地服务器所加载的页面所在的目录

port:8050,

open:true,

publicPath:"/",

historyApiFallback: true,//不跳转

inline: true//实时刷新

}

}

编译完之后只在这里生成了，却没有生成单独的文件。

恳请大神帮忙看看，谢谢！！！！

解决方案

还需要配置一下，搞了几天总算可以了

{

test: /\.vue$/,

loader: 'vue-loader',

options: {

extractCSS: true

}

},

扫一扫关注IT屋

微信公众号搜索 “ IT屋 ” ，选择关注与百万开发者在一起