使用React和Webpack，SASS不会在HTML中呈现

Question

我使用Webpack与SASS有一个React项目，我的项目编译成功，但不代表浏览器中HTML页面中的CSS效果。我用webpack-dev-server命令编译它。

我有以下webpack.config.js：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

    module.exports = {
        entry: {
            main: './src/scripts/main.js'
        },
        output: {
            filename: './dist/scripts/[name].js'
        },
        devtool: 'source-map',
        module: {
            loaders: [{
                    test: /\.js$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'babel-loader',
                    query: {
                        presets: ['react', 'es2015']
                    }
                },
                {
                    test: /\.scss$/,
                    loader: ExtractTextPlugin.extract('css-loader!sass-loader')
                }
            ]
        },
        plugins: [
            new ExtractTextPlugin('dist/styles/main.css', {
                allChunks: true
            })
        ]
    }

并关注main.js：

import React from 'react';
import ReactDOM from 'react-dom';
import style from '../styles/main.scss';

ReactDOM.render(<h1 class="title">Hello World</h1>, document.getElementById('example'));

main.scss：

.example {
    h1 {
        color: green;
    }
}

这是devDependcies部分：

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.5",
    "extract-text-webpack-plugin": "^3.0.0",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^1.3.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.1.0",
    "webpack-dev-server": "^2.7.1"
  }