Webpack無法構建SCSS

Question

我正在嘗試設置webpack來捆綁我的js react組件，js模塊並將我的.SCSS文件構建到CSS，但是我一直遇到錯誤。 以下是我的webpack.config.js：

 const webpack = require('webpack'); const nodeEnv = process.env.NODE_ENV || 'production'; const ExtractTextPlugin = require('extract-text-webpack-plugin'); const publicFolder = `${__dirname}/public`; module.exports = { devtool: 'source-map', entry: ['./src/index.js', './scss/main.scss'], module: { loaders: [ { test: /\\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015'], }, }, { test: /\\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['style-loader', 'css-loader', 'sass-loader'], publicPath: publicFolder, }), }, ], }, output: { path: publicFolder, filename: './js/bundle.min.js', }, plugins: [ // uglify js new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, output: { comments: false, }, sourceMap: true, }), new ExtractTextPlugin({ filename: './css/main.css', disable: false, allChunks: true, }), new webpack.DefinePlugin({ 'proccess.env': { NODE_ENV: JSON.stringify(nodeEnv) }, }), ], }; 

但是當我運行npm start dev時，我得到以下輸出和錯誤：

 Hash: 414b88d3488c04fea4d1 Version: webpack 2.6.1 Time: 3952ms Asset Size Chunks Chunk Names ./js/bundle.min.js 1.98 MB 0 [emitted] [big] main [8] ./~/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built] [10] ./~/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built] [19] ./~/react/lib/React.js 3.32 kB {0} [built] [80] ./~/react/react.js 56 bytes {0} [built] [81] ./src/index.js 467 bytes {0} [built] [82] ./scss/main.scss 4.58 kB {0} [built] [failed] [1 error] [83] ./src/App.js 898 bytes {0} [built] [100] ./~/react-dom/index.js 59 bytes {0} [built] [114] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built] [173] ./~/react/lib/ReactChildren.js 6.19 kB {0} [built] [174] ./~/react/lib/ReactClass.js 26.9 kB {0} [built] [175] ./~/react/lib/ReactDOMFactories.js 5.53 kB {0} [built] [176] ./~/react/lib/ReactPropTypes.js 500 bytes {0} [built] [178] ./~/react/lib/ReactPureComponent.js 1.32 kB {0} [built] [184] multi ./src/index.js ./scss/main.scss 40 bytes {0} [built] + 170 hidden modules ERROR in ./scss/main.scss Module build failed: ReferenceError: window is not defined at eval (eval at <anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:90:1), <anonymous>:23:9) at eval (eval at <anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:90:1), <anonymous>:12:46) at module.exports (eval at <anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:90:1), <anonymous>:57:46) at eval (eval at <anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:112:1), <anonymous>:12:78) at Object.<anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:112:1) at __webpack_require__ (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:21:30) at /Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:67:18 at Object.<anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:70:10) at Module._compile (module.js:570:32) at Object.exec (/Users/mac/jsapps/headlines/node_modules/webpack/lib/NormalModule.js:126:12) at Object.<anonymous> (/Users/mac/jsapps/headlines/node_modules/extract-text-webpack-plugin/loader.js:112:21) at Compiler.<anonymous> (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compiler.js:296:10) at /Users/mac/jsapps/headlines/node_modules/webpack/lib/Compiler.js:499:13 at next (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:138:11) at Compiler.<anonymous> (/Users/mac/jsapps/headlines/node_modules/extract-text-webpack-plugin/loader.js:93:4) at next (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:140:14) at Compiler.<anonymous> (/Users/mac/jsapps/headlines/node_modules/webpack/lib/CachePlugin.js:62:5) at Compiler.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:142:13) at /Users/mac/jsapps/headlines/node_modules/webpack/lib/Compiler.js:496:10 at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:131:46) at self.applyPluginsAsync.err (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compilation.js:649:19) at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:131:46) at self.applyPluginsAsync.err (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compilation.js:640:11) at next (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:138:11) at Compilation.compilation.plugin (/Users/mac/jsapps/headlines/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:230:5) at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:142:13) at self.applyPluginsAsync.err (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compilation.js:635:10) at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:131:46) at sealPart2 (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compilation.js:631:9) at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:131:46) @ multi ./src/index.js ./scss/main.scss ERROR in ./scss/main.scss Module build failed: ReferenceError: window is not defined at eval (eval at <anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:90:1), <anonymous>:23:9) at eval (eval at <anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:90:1), <anonymous>:12:46) at module.exports (eval at <anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:90:1), <anonymous>:57:46) at eval (eval at <anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:112:1), <anonymous>:12:78) at Object.<anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:112:1) at __webpack_require__ (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:21:30) at /Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:67:18 at Object.<anonymous> (/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss:70:10) at Module._compile (module.js:570:32) at Object.exec (/Users/mac/jsapps/headlines/node_modules/webpack/lib/NormalModule.js:126:12) at Object.<anonymous> (/Users/mac/jsapps/headlines/node_modules/extract-text-webpack-plugin/loader.js:112:21) at Compiler.<anonymous> (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compiler.js:296:10) at /Users/mac/jsapps/headlines/node_modules/webpack/lib/Compiler.js:499:13 at next (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:138:11) at Compiler.<anonymous> (/Users/mac/jsapps/headlines/node_modules/extract-text-webpack-plugin/loader.js:93:4) at next (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:140:14) at Compiler.<anonymous> (/Users/mac/jsapps/headlines/node_modules/webpack/lib/CachePlugin.js:62:5) at Compiler.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:142:13) at /Users/mac/jsapps/headlines/node_modules/webpack/lib/Compiler.js:496:10 at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:131:46) at self.applyPluginsAsync.err (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compilation.js:649:19) at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:131:46) at self.applyPluginsAsync.err (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compilation.js:640:11) at next (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:138:11) at Compilation.compilation.plugin (/Users/mac/jsapps/headlines/node_modules/webpack/lib/optimize/UglifyJsPlugin.js:230:5) at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:142:13) at self.applyPluginsAsync.err (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compilation.js:635:10) at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:131:46) at sealPart2 (/Users/mac/jsapps/headlines/node_modules/webpack/lib/Compilation.js:631:9) at Compilation.applyPluginsAsyncSeries (/Users/mac/jsapps/headlines/node_modules/tapable/lib/Tapable.js:131:46) ERROR in /Users/mac/jsapps/headlines/node_modules/extract-text-webpack-plugin/loader.js??ref--1-0!/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/style-loader/index.js!/Users/mac/jsapps/headlines/node_modules/css-loader/index.js!/Users/mac/jsapps/headlines/node_modules/sass-loader/lib/loader.js!/Users/mac/jsapps/headlines/scss/main.scss doesn't export content Child extract-text-webpack-plugin: [0] ./~/css-loader!./~/sass-loader/lib/loader.js!./scss/main.scss 1.13 kB {0} [built] [1] ./~/style-loader/lib/addStyles.js 8.66 kB {0} [built] [2] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [4] ./~/style-loader/lib/urls.js 3.01 kB {0} [built] + 1 hidden modules Child extract-text-webpack-plugin: [0] ./~/css-loader!./~/sass-loader/lib/loader.js!./scss/main.scss 1.13 kB {0} [built] [1] ./~/style-loader/lib/addStyles.js 8.66 kB {0} [built] [2] ./~/css-loader/lib/css-base.js 2.26 kB {0} [built] [4] ./~/style-loader/lib/urls.js 3.01 kB {0} [built] + 1 hidden modules 

在過去的24小時里，我一直在努力使它工作，但似乎我已經碰壁了。 誰能指出我在做什么錯或對此進行修復？

Answer 1

我有我這樣配置：

  entry: ['./src/index.js', './scss/main.scss'],
  module: {
    loaders: [...
            {
                loaders: ["style-loader", "css-loader", "sass-loader"],
                test: /\.scss$/
            },

還有一件事要注意我的輸出是這樣定義的

output: {
    // path: path.join(__dirname, 'build'),
    path: path.join(__dirname, './public/build'),
    filename: 'bundle.js',
} ,