Question

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

Answer 1

经过多次搜索，我发现了Github issue。解决方法是在webpack.config.js中更改此行

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

到

loader: 'style!css?modules!sass'

Sass装载机没有装载风格

1 个答案: