与webpack的Scss提取

我正在尝试使用ExtractTextPlugin提取并将我的scss转换为css,并将其与client.min.js一起移动到src文件夹中,但构buildwebpack.config.js文件时目前正在获取以下问题:

./scss/styles.js中的错误未find模块:错误:无法parsingC:\ Users \ ajoku \ Desktop \ Web Projects \ learn2node \ http \ scss @ ./scss/styles.js中的模块“main.scss” :0-20

我的webpack.config.js文件:

 "use strict"; var debug = process.env.NODE_ENV !== "production"; var webpack = require('webpack'); var path = require('path'); let ExtractTextPlugin = require('extract-text-webpack-plugin'); let extractSCSS = new ExtractTextPlugin('./scss/main.scss',{allChunks: true}); module.exports = { context: path.join(__dirname, "http"), devtool: debug ? "inline-sourcemap" : null, entry: { js:"./react/client.js", scss: "./scss/styles.js",}, module: { loaders: [ { test: /\.js?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015', 'stage-0'], plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] }}, {test: /\.scss$/i, loader: ExtractTextPlugin.extract('css!scss')}, ] }, output: { path: "./src/", filename: "client.min.js" }, plugins: debug ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.OccurenceOrderPlugin(), new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), ], plugins: [ new ExtractTextPlugin('main.css', { allChunks: true }) ] }; 

我的styles.js文件

 require("main.scss"); 

我的scss文件与styles.js文件一起位于http/scss可能导致问题的原因是什么?感谢您的时间。

sass-loader和extract-text-webpack-plugin是可能的

webpack.config

 module.exports = { module: { { test: /\.scss$/, include: path.resolve(__dirname, 'http/scss'), loader: ExtractTextPlugin.extract('style', 'css?modules&localIdentName=[name]-[local]!autoprefixer!sass') } } plugins: [ new ExtractTextPlugin('[name]-[hash].min.css') ] } 

的package.json

 "devDependencies": { "autoprefixer-loader": "^3.1.0", "css-loader": "^0.23.0", "node-sass": "^3.4.2", "sass-loader": "^3.1.2", "extract-text-webpack-plugin": "^0.9.1", "style-loader": "^0.13.0" }