React Toolbox和Webpack 2

Question

我正在构建一个基于https://github.com/ctrlplusb/react-universally的反应应用程序，它正在使用Webpack 2。

对于我的UI组件，我想使用http://react-toolbox.com。

我让webpack设置在另一个项目中使用了反应工具箱和Webpack 1。不知怎的，类似的配置不再起作用了：

/Users/marc/Sites/react-universally/node_modules/react-toolbox/lib/tabs/theme.scss:1
(function (exports, require, module, __filename, __dirname) { @import "../colors";
                                                              ^
SyntaxError: Unexpected token ILLEGAL
    at Object.exports.runInThisContext (vm.js:76:16)
    at Module._compile (module.js:513:28)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/marc/Sites/react-universally/node_modules/react-toolbox/lib/tabs/index.js:18:14)
    at Module._compile (module.js:541:32)

我当前的webpack配置如下所示：

{ target: 'web',
  node: { __dirname: true, __filename: true },
  externals: [],
  devtool: 'source-map',
  entry: 
   { main: 
      [ 'react-hot-loader/patch',
        'webpack-hot-middleware/client?reload=true&path=http://localhost:8006/__webpack_hmr',
        '/Users/marc/Sites/react-universally/src/index.js' ] },
  output: 
   { path: '/Users/marc/Sites/react-universally/build/client',
     filename: '[name].js',
     chunkFilename: '[name]-[chunkhash].js',
     publicPath: '/',
     libraryTarget: 'var' },
  resolve: 
   { modules: [ '/Users/marc/Sites/react-universally/src', 'node_modules' ],
     extensions: [ '.js', '.jsx', '.json', '.scss' ] },
  plugins: 
   [ DefinePlugin { definitions: [Object] },
     AssetsWebpackPlugin { options: [Object], writer: [Function: queuedWriter] },
     NoErrorsPlugin {},
     HotModuleReplacementPlugin { multiStep: undefined, fullBuildTimeout: 200 } ],
  module: 
   { loaders: 
    [
       { test: /\.jsx?$/,
          loader: 'babel-loader',
          exclude: [ /node_modules/, '/Users/marc/Sites/react-universally/build' ],
          query: { 
            env: 
              {
                development: {
                  plugins: ['react-hot-loader/babel'],
                },
              }, 
            presets: [
                // JSX
                'react',
                // Webpack 2 includes support for es2015 imports, therefore we used this
                // modified preset.
                'es2015-webpack',
                //Added Stage 0 for destructor
                'stage-0'
              ],
             } },
        { test: /\.json$/, loader: 'json-loader' },
        { test: /\.css$/, loaders: [ 'style-loader', { loader: 'css-loader', query: { sourceMap: true } }, ] },
        { test: /\.scss$/,
          exclude: /(react-toolbox)/,
          loaders: 
           [ 'style',
             'css?sourceMap&-minimize',
             'postcss',
             'sass?sourceMap' ] },
        { test: /\.scss$/,
          include: /(react-toolbox)/,
          loaders: 
           [ 'style',
             'css?sourceMap&-minimize&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
             'postcss',
             'sass?sourceMap',
             'toolbox' ] },
        { test: /\.font$/, loaders: [ 'style', 'css', 'fontgen' ] },
        { test: /\.(png|jpg|gif)$/, loader: 'url?limit=8192' } 
      ]
    }
  sassLoader: 
   { includePaths: 
      [ '/Users/marc/Sites/react-universally/src/styles',
        '/Users/marc/Sites/react-universally/node_modules' ] },
  postcss: 
   [ Processor {
       version: '5.1.0',
       plugins: [Object],
       postcssPlugin: 'cssnano',
       postcssVersion: '5.1.0' } ],
  toolbox: { theme: './src/style/themes/toolbox.scss' } }