загрузчик webpack sass не работает

В общей сложности я потратил около 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, и он не работает?

Вот мой файл 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, но не смог заставить их работать.

Примечание:

Я заметил, что если я сделаю:

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

и удалите тестовый объект .scss, он скомпилирует любой sass, который я добавлю в файл .css... поэтому я сделал: test: /\.(scss|css)$/, и он не выдает ту же ошибку, что и выше.