在 ReactJS 和 Webpack 中使用 SASS

我在让 Sass 与我的 React 设置一起工作时遇到了难以置信的困难。我已经安装了css-loader, sass-loader, 并且style-loader我看到它是必需的。我还安装了extract-text-webpack-plugin将 .scss 转换为 .css 的 。目前，我关心这些文件：

索引.js

import React from 'react'
import ReactDOM from 'react-dom'

import App from './app.jsx'
require('./app.scss');

ReactDOM.render(<App />, document.getElementById('app'))

应用程序.scss

@import 'styles/container.scss'

container.scss (./styles/container.scss)

body {
    color: green;
}

webpack.config.js

const path = require("path")
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
    entry: './index.js',
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new ExtractTextPlugin({ filename: 'app.css', allChunks: true })
    ],
    module: {
        rules: [
            { test: /\.jsx?/, loader: 'babel-loader' },
            {
  test: /\.css$/,
  include: /node_modules/,
  exclude: /app/,
  loaders: ['style-loader', 'css-loader'],
}, {
  test: /\.s[ac]ss$/,
  exclude: /node_modules/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
  })
}
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, "."),
        port: 9000
    }
}

当我使用 Webpack 捆绑它时，它运行良好并创建了“app.css”文件，但样式并未应用于 React 组件。使用 dev webpack 服务器，开发人员工具给了我这个错误：

./app.scss
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

这可能是我缺乏 React 知识，或者此设置所需的任何其他东西。谁能告诉我为什么 Sass 不能正常工作？