javascript - Sass 加载器未加载样式

Question

Webpack 很灵活......如果我能让它工作就好了。我有两个文件。

1. App.js
2. 应用程序.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 没有错误。控制台中没有错误。

Answer 1

经过多次搜索，我发现了这个 Github issue 。解决方案是更改 webpack.config.js 中的这一行

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

到

loader: 'style!css?modules!sass'