SASSでWebpackを設定する方法

Question

私はReactアプリケーションを開発するためにWebpackを使用しており、SASSファイルからCSSを別のファイルに保存したいと考えています。

var path   = require('path'); 
var webpack  = require('webpack'); 
var debug   = process.env.NODE_ENV !== "production"; 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    context: path.join(__dirname, "src"), 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/index.js", 
    module: { 
loaders: [ 
    { 
    test: /\.js?$/, 
    exclude: /(node_modules|bower_components)/, 
    loader: "babel-loader", 
    query: {} 
    }, 
    { 
    test: /\.scss$/, 
    loader:ExtractTextPlugin.extract('css','sass') 
    } 
] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "index.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    new ExtractTextPlugin('dist/main.css') 
    ] 
}; 

index.js：これは私のwebpack.confg.jsファイルの内容で抽出し、テキストのWebPACK - プラグインの「ローダーは、対応するプラグインなしで使用される 『

：私は』エラー」を得続けます内容

require("../sass/main.scss"); 

console.log('hello'); 

私のpackage.jsonの依存関係

"dependencies": { 
"babel-core": "^6.14.0", 
"babel-loader": "^6.2.5", 
"babel-preset-es2015": "^6.14.0", 
"css-loader": "^0.25.0", 
"extract-text-webpack-plugin": "^1.0.1", 
"history": "^4.0.1", 
"node-sass": "^3.10.0", 
"react": "^15.3.1", 
"react-dom": "^15.3.1", 
"react-router": "^2.8.1", 
"sass-loader": "^4.0.2", 
"webpack": "^1.13.2", 
"webpack-dev-server": "^1.15.2" 
    }, 
    "devDependencies": {} 
} 

Answer 1

あなたはWHE任意のプラグインをロードしていませんn debugが有効：

plugins: debug ? [ /* no plugins! */ ] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    new ExtractTextPlugin('dist/main.css') 
]