Sass 加载器不加载样式

Webpack is slick...要是我能让它工作就好了。我有两个文件。

1. 应用.js
2. App.scss

我想从 App.scss 导入样式并在应用程序中使用它们.js

这是我的代码。

// App.js
import React, {Component} from 'react';
import s from './App.scss';

class App extends Component {
    render() {
        return (
            <div className={s.app}>
            </div>
        );
    }
}
console.log('what is in s ' + JSON.stringify(s));
export default App;

和萨斯文件。

// App.scss
.app {
    width: 100%;
    height: 100%;
    background-color: blue;
}

控制台显示 s 是一个空对象。我希望看到{应用程序：...}。

Weback是这样设置的。

// webpack.config.js
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
       devtool: 'source-map',
       entry: [
           './src/client',
           'webpack-dev-server/client?http://localhost:8080',
           'webpack/hot/dev-server'
       ],
       output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new HtmlWebpackPlugin({
            template: './src/index.html'
        })
       ],
       module: {
        loaders: [
        {
             test: /'.scss$/,
             loaders: ['style', 'css', 'sass']
        }, 
        {
            test: /'.js$/,
            loader: 'babel-loader',
            include: path.join(__dirname, 'src')
        }]
       },
       devServer: {
        contentBase: './dist',
        hot: true
       }
};

没有来自 webpack 的错误。控制台中没有错误。