1. 首頁
  2. 問答
  3. Webpack不建設SCSS

Webpack不建設SCSS

2017-06-01 116 views
0

我試圖設置webpack綁定我的js反應組件，js模塊並將我的.SCSS文件構建到css，但我不斷收到錯誤。下面是我的webpack.config.js：Webpack不建設SCSS

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啓動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小時，但它似乎我已經打在這一個牆上。任何人都可以指出我做錯了什麼或解決這個問題嗎？

來源

2017-06-01 joel_ace

+0

你有''ExtractTextPlugin.extract.use風格loader' '試圖從那裏刪除它，因爲它應該只在'fallback'中。 – Zero

+0

謝謝@零。現在正在工作 –

+0

不客氣！樂於幫助！ – Zero

回答

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', 
} ,

來源

2017-06-01 06:02:34

+0

希望它適合你我注意到你正在使用ExtractTextPlugin。 –

+0

如果你有一個鏈接到你的github我可以嘗試下載，並幫助你解決問題拍攝:) –

+0

它的工作。非常感謝你 –

相關問題

 相關問題