webpack sass loader无法正常工作

Question

我总共花了大约5个小时试图解决这个问题。我正在尝试向我的节点应用添加scss支持，但它仍然显示相同的错误：

/Users/jamesoe/projects/-frontend/build/server/bundle.js:3160
[1] throw new Error("Module parse failed: /Users/jamesoe/projects/-frontend/ui/style/index.scss Unexpected token (1:0)\nYou may need an appropriate loader to handle this file type.\n| .x {\n|   display: none;\n| }");
[1] ^
[1]
[1] Error: Module parse failed: /Users/jamesoe/projects/-frontend/ui/style/index.scss Unexpected token (1:0)
[1] You may need an appropriate loader to handle this file type.
[1] | .x {
[1] |   display: none;
[1] | }
[1]     at Object.<anonymous> (/Users/jamesoe/projects/-frontend/build/server/bundle.js:3160:7)
[1]     at __webpack_require__ (/Users/jamesoe/projects/-frontend/build/server/bundle.js:20:30)
[1]     at Object.defineProperty.value (/Users/jamesoe/projects/-frontend/build/server/bundle.js:2610:1)
[1]     at __webpack_require__ (/Users/jamesoe/projects/-frontend/build/server/bundle.js:20:30)
[1]     at Object.defineProperty.value (/Users/jamesoe/projects/-frontend/build/server/bundle.js:405:17)
[1]     at __webpack_require__ (/Users/jamesoe/projects/-frontend/build/server/bundle.js:20:30)
[1]     at Object.<anonymous> (/Users/jamesoe/projects/-frontend/build/server/bundle.js:3237:15)
[1]     at __webpack_require__ (/Users/jamesoe/projects/-frontend/build/server/bundle.js:20:30)
[1]     at /Users/jamesoe/projects/-frontend/build/server/bundle.js:66:18
[1]     at Object.<anonymous> (/Users/jamesoe/projects/-frontend/build/server/bundle.js:69:10)

我在index.scss文件中添加了一个简单的样式＆amp;它失败了？

这是我的webpack.config.client.js文件：

const webpack = require('webpack');

const DEV = process.env.NODE_ENV !== 'production';

module.exports = {
  bail: !DEV,
  devtool: DEV ? 'cheap-module-source-map' : 'source-map',
  entry: './ui/client.js',
  output: {
    path: 'build/client',
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    loaders: [{
      test: /\.css/,
      loader: 'style-loader!css-loader',
    }, {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /(node_modules)/,
    }, {
      test: /\.json$/,
      loader: 'json-loader',
    },
    {
      test: /\.(graphql|gql)$/,
      exclude: /node_modules/,
      loader: 'graphql-tag/loader',
    },
    {
      test: /\.scss$/,
      use: [{
        loader: 'style-loader' // creates style nodes from JS strings
      }, {
        loader: 'css-loader' // translates CSS into CommonJS
      }, {
        loader: 'sass-loader?sourceMap' // compiles Sass to CSS
      }]
    }]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(DEV ? 'development' : 'production'),
      },
    }),
    DEV && new webpack.optimize.UglifyJsPlugin({
      compress: {
        screw_ie8: true, // React doesn't support IE8
        warnings: false,
      },
      mangle: {
        screw_ie8: true,
      },
      output: {
        comments: true,
        screw_ie8: true,
      },
    }),
    DEV && new webpack.optimize.AggressiveMergingPlugin(),
  ].filter(Boolean),
};

我尝试了其他node-sass webpack解决方案，但还没有能够让任何人工作。

注意：

如果我这样做，我注意到了：

test: /\.css/,
loader: 'style-loader!css-loader!sass-loader',

并删除.scss测试对象，它会编译我添加到.css文件中的任何sass ...然后我做了：test: /\.(scss|css)$/,＆amp;没有抛出与上面相同的错误。