Sass 加载程序未加载样式答案

【问题标题】：Sass loader not loading styleSass 加载程序未加载样式
【发布时间】：2016-02-27 05:52:13
【问题描述】：

Webpack 很灵巧……要是我能让它工作就好了。我有两个文件。

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 没有错误。控制台中没有错误。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

经过大量搜索，我找到了这个Github issue。解决方法是在 webpack.config.js 中更改这一行

loaders: ['style', 'css', 'sass']

到

loader: 'style!css?modules!sass'

【讨论】：