Webpack 不构建 SCSS答案

【问题标题】：Webpack not building SCSSWebpack 不构建 SCSS
【发布时间】：2017-06-01 05:55:06
【问题描述】：

我正在尝试设置 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 小时里，我一直在努力让它发挥作用，但我似乎在这个问题上碰壁了。谁能指出我做错了什么或解决这个问题？

【问题讨论】：

你在ExtractTextPlugin.extract.use 中有style-loader 尝试从那里删除它，因为它应该只在fallback 中。
感谢@Zero。它现在正在工作
不客气！乐于助人！

标签： javascript node.js webpack

【解决方案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',
} ,

【讨论】：

希望它对你有用我注意到你正在使用 ExtractTextPlugin。
如果你有指向你的 github 的链接，我可以尝试下载并帮助你解决问题:)