SASS does not render in HTML using React with Webpack - html

Question

I have a React project with SASS using Webpack, my project compiles successfully, but does not represent the CSS effect in the HTML page in the browser. I compile it with webpack-dev-server command.
I have the following 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
})
]
}
and following 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;
}
}
and this is the devDependcies section:
"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"
}