ReactJSとWebpackでSASSを使用する

Question

私はReassセットアップでSassを動作させることが非常に困難でした。私が見たcss-loader、sass-loader、およびstyle-loaderがインストールされています。また、.scssを.cssに変換するextract-text-webpack-pluginもインストールしました。現在、私はこれらのファイルと心配です：

index.js

import React from 'react' 
import ReactDOM from 'react-dom' 

import App from './app.jsx' 
require('./app.scss'); 

ReactDOM.render(<App />, document.getElementById('app')) 

app.scss

@import 'styles/container.scss' 

container.scss（./styles/container。 scss）

body { 
    color: green; 
} 

webpack.config.js

const path = require("path") 
const webpack = require("webpack") 
const ExtractTextPlugin = require("extract-text-webpack-plugin") 

module.exports = { 
    entry: './index.js', 
    output: { 
     filename: 'bundle.js' 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ filename: 'app.css', allChunks: true }) 
    ], 
    module: { 
     rules: [ 
      { test: /\.jsx?/, loader: 'babel-loader' }, 
      { 
    test: /\.css$/, 
    include: /node_modules/, 
    exclude: /app/, 
    loaders: ['style-loader', 'css-loader'], 
}, { 
    test: /\.s[ac]ss$/, 
    exclude: /node_modules/, 
    use: ExtractTextPlugin.extract({ 
    fallback: 'style-loader', 
    use: ['css-loader', 'sass-loader'] 
    }) 
} 
     ] 
    }, 
    devServer: { 
     contentBase: path.join(__dirname, "."), 
     port: 9000 
    } 
} 

私はそれがうまく実行され、「app.css」ファイルを作成しますが、スタイルが反応コンポーネントには適用されません、WebPACKのを使用してバンドル。 、開発ツールをDEVのWebPACKのサーバーを使用して私は、このエラーを与える：

./app.scss 
Module parse failed: Unexpected character '@' (1:0) 
You may need an appropriate loader to handle this file type. 

これは私の劇中での知識と反応の欠如、またはこのセットアップのために必要とされる他のもののいずれかであるかもしれません。誰かがSassが正しく働いていない理由を教えてもらえますか？

Answer 1

私はあなたが言及エキス・テキストのWebPACK-プラグインに慣れていないけど、WebPACKのでセットアップSASSローダーに私はこれを行うだろう：あなたはサス・ローダーが必要になります

module: { 
    rules: [ 
    {test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ]} 
    ] 
} 

お知らせ、css-ローダーとスタイルローダー。

これで、SCSSファイルをrequire（ './ app.scss'）としてインポートすることも、es6を使用している場合は './app.scss'をインポートすることもできます。

こちらがお役に立てば幸いです。