如何使用SASS設置Webpack

Question

我正在使用Webpack開發React應用程序，並希望將我的SASS文件中的CSS保存在單獨的文件中。我不斷收到「錯誤：‘提取文本-的WebPack-插件’加載器沒有相應的插件」

這是我webpack.confg.js文件的內容：

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內容

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

你不加載任何插件磨片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') 
]