reactjs - webpack 中的 sass 加载器出错

Question

有一些帖子使用很多行话来解释这个问题，但是，作为 webpack 2 的新手，我无法理解其借口以及为什么会发生此错误：

Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (bootstrap 6c41ac6…:693)
at fn (bootstrap 6c41ac6…:114)
at Object.../../node_modules/css-loader/index.js!../../node_modules/postcss-loader/index.js!../../node_modules/sass-loader/index.js?sourceMap!../scss/app.scss (app.scss:1)
at __webpack_require__ (bootstrap 6c41ac6…:693)
at fn (bootstrap 6c41ac6…:114)
at Object.../scss/app.scss (app.scss?e0f5:4)
at __webpack_require__ (bootstrap 6c41ac6…:693)
at fn (bootstrap 6c41ac6…:114)
at Object../index.js (app-6c41ac6….js:212)
at __webpack_require__ (bootstrap 6c41ac6…:693)

我意识到错误显然指向 sass-loader，但我根本不明白如何调试它。

以下是我的 webpack.dev.config.js：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const SpritePlugin = require('svg-sprite-loader/plugin');
const autoprefixer = require('autoprefixer');

// Common plugins
const plugins = [
  new SpritePlugin(),
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    filename: 'vendor-[hash].js',
    minChunks(module) {
      const context = module.context;
      return context && context.indexOf('node_modules') >= 0;
    },
  }),
  new webpack.DefinePlugin({
    'process.env': {
      NODE_ENV: JSON.stringify(nodeEnv),
    },
  }),
  new webpack.NamedModulesPlugin(),
  new HtmlWebpackPlugin({
    template: path.join(sourcePath, 'index.html'),
    path: buildPath,
    filename: 'index.html',
  }),
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        autoprefixer({
          browsers: [
            'last 3 version',
            'ie >= 10',
          ],
        }),
      ],
      context: sourcePath,
    },
  }),
  new ExtractTextPlugin({
    filename: '[name].[contenthash].css',
  })
];

// Common rules
const rules = [
  {
    test: /\.(js|jsx)$/,
    exclude: /node_modules/,
    use: [
      'babel-loader',
    ],
  },
  {
    use: ExtractTextPlugin.extract({
      use: ['css-loader', 'less-loader']
    }),
    test: /\.less$/
  },
  {
    test: /\.jpe?g$|\.gif$|\.png$|\.ttf$|\.eot$|\.svg$/,
    use: 'file-loader?name=[name].[ext]?[hash]'
  },
  {
    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'url-loader?limit=10000&mimetype=application/fontwoff'
  }
];

if (isProduction) {
  // Production plugins
  plugins.push(
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        screw_ie8: true,
        conditionals: true,
        unused: true,
        comparisons: true,
        sequences: true,
        dead_code: true,
        evaluate: true,
        if_return: true,
        join_vars: true,
      },
      output: {
        comments: false,
      },
    }),
    new ExtractTextPlugin('style-[hash].css')
  );

  // Production rules
  rules.push(
    {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: 'css-loader!postcss-loader!sass-loader',
      }),
    }
  );
} else {
  // Development plugins
  plugins.push(
    new webpack.HotModuleReplacementPlugin(),
    new DashboardPlugin()
  );

  // Development rules
  rules.push(
    {
      test: /\.scss$/,
      exclude: /node_modules/,
      use: [
        'style-loader',
        // Using source maps breaks urls in the CSS loader
        // https://github.com/webpack/css-loader/issues/232
        // This comment solves it, but breaks testing from a local network
        // https://github.com/webpack/css-loader/issues/232#issuecomment-240449998
        // 'css-loader?sourceMap',
        'css-loader',
        'postcss-loader',
        'sass-loader?sourceMap',
      ],
    }
  );
}

module.exports = {
  devtool: isProduction ? false : 'source-map',
  context: jsSourcePath,
  entry: {
    js: './index.js',
  },
  output: {
    path: buildPath,
    publicPath: "http://localhost:3000/",
    filename: 'app-[hash].js',
  },
  module: {
    rules,
  },
  resolve: {
    extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
    modules: [
      path.resolve(__dirname, 'node_modules'),
      jsSourcePath,
    ],
    alias: {
      '../../theme.config$': path.join(__dirname, 'my-semantic-theme/theme.config')
    }
  },
  plugins
};

很多帮助将不胜感激。如果需要将其标记为重复，请这样做，但请帮助我了解 sass-loader 到底在哪里搞砸了。

以下是 package.json：

   {
  "name": "",
  "version": "0.1.7",
  "private": false,
  "license": "MIT",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "dev": "webpack-dashboard -t 'Marvin' -- webpack-dev-server",
    "build": "rm -rf ./build && NODE_ENV=\"production\" webpack",
    "lint-break-on-errors": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx",
    "lint": "eslint ./source/js ./webpack.config.js -f table --ext .js --ext .jsx || true",
    "preview": "rm -rf ./build && NODE_ENV=\"production\" webpack-dashboard -t 'Preview Mode - Marvin' -- webpack-dev-server",
    "hook-add": "prepush install",
    "hook-remove": "prepush remove"
  },
  "devDependencies": {
    "autoprefixer": "^6.5.3",
    "babel-core": "^6.7.2",
    "babel-eslint": "^7.1.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-syntax-decorators": "^6.13.0",
    "babel-plugin-transform-class-properties": "^6.6.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.6.0",
    "babel-preset-es2015": "^6.22.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "babel-preset-stage-0": "^6.16.0",
    "babel-runtime": "^6.6.1",
    "css-loader": "^0.28.4",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.7.1",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "node-sass": "^3.13.1",
    "postcss-loader": "^2.0.6",
    "prepush": "^3.1.11",
    "redux-logger": "^2.7.4",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.0",
    "svg-sprite-loader": "^2.1.0",
    "svgo": "^0.7.2",
    "svgo-loader": "^1.2.1",
    "url-loader": "^0.5.7",
    "webpack": "^2.2.1",
    "webpack-dashboard": "^0.4.0",
    "webpack-dev-server": "^2.2.1"
  },
  "dependencies": {
    "babel-plugin-transform-semantic-ui-react-imports": "^1.3.0",
    "babel-polyfill": "^6.23.0",
    "es6-promise": "^3.3.1",
    "eslint": "^4.1.1",
    "immutable": "^3.8.1",
    "isomorphic-fetch": "^2.2.1",
    "prop-types": "^15.5.10",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^4.4.8",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "redux": "^3.6.0",
    "redux-thunk": "^2.2.0",
    "semantic-ui-less": "^2.2.10",
    "semantic-ui-react": "^0.70.0"
  },
  "description": "",
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/Stanko/react-redux-webpack2-boilerplate.git"
  },
  "keywords": [
    "react",
    "redux",
    "webpack2",
    "boilerplate"
  ],
  "author": "",
  "bugs": {
    "url": "https://github.com/Stanko/react-redux-webpack2-boilerplate/issues"
  }
}

以下是主要入口文件：

import React from 'react';
import ReactDOM from 'react-dom';
import "semantic-ui-less/semantic.less";
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import 'babel-polyfill';
import logger from 'dev/logger';

import rootReducer from 'reducers';

import App from 'views/App';

// Load SCSS
import '../scss/app.scss';

const isProduction = process.env.NODE_ENV === 'production';

// Creating store
let store = null;

if (isProduction) {
  // In production adding only thunk middleware
  const middleware = applyMiddleware(thunk);

  store = createStore(
    rootReducer,
    middleware
  );
} else {
  // In development mode beside thunk
  // logger and DevTools are added
  const middleware = applyMiddleware(thunk, logger);
  let enhancer;

  // Enable DevTools if browser extension is installed
  if (window.__REDUX_DEVTOOLS_EXTENSION__) { // eslint-disable-line
    enhancer = compose(
      middleware,
      window.__REDUX_DEVTOOLS_EXTENSION__() // eslint-disable-line
    );
  } else {
    enhancer = compose(middleware);
  }

  store = createStore(
    rootReducer,
    enhancer
  );
}


// Render it to DOM
ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);