Sass loader not loading style

Webpack是光滑的......如果我只能讓它工作。我有兩個文件。Sass loader not loading style

App.js
App.scss

我想從App.scss導入的樣式，並利用它們在App.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;

和Sass文件。

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

控制檯顯示s是一個空對象。我期望看到{app：...}。

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沒有錯誤。控制檯中沒有錯誤。

來源

2016-02-27 Wade Anderson