Verwendung von SASS mit ReactJS und Webpack

Question

Ich hatte unglaubliche Schwierigkeiten, Sass mit meiner React-Konfiguration zu arbeiten. Ich habe die css-loader, und style-loader installiert, die ich gesehen habe benötigt wird. Ich habe auch die extract-text-webpack-plugin installiert, die .scss in .css konvertiert. Derzeit bin ich besorgt mit diesen Dateien:

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 
    } 
} 

Wenn ich es mit Webpack bündeln, es läuft gut und schafft die „app.css“ Datei, aber die Stile sind nicht auf die React Komponenten angewendet. Mit Hilfe der Entwickler webpack Server, Entwickler-Tools gibt mir diese Fehlermeldung:

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

Das ist mein Mangel Kenntnis der Reaktion im Spiel sein könnte, oder eine der anderen Dinge, die für diese Konfiguration erforderlich sind. Kann mir jemand erklären, warum Sass nicht richtig funktioniert?

Answer 1

Ich bin nicht vertraut mit dem Extrakt-Text-webpack-Plugin, das Sie erwähnen, aber die Einrichtung sass loader in Webpack würde ich dies tun:

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

Hinweis Sie würden Sass-loader benötigen, CSS- Loader und Style-Loader.

Mit diesem können Sie Ihre SCSS-Datei als entweder erfordern ('./ app.scss') importieren oder './app.scss' importieren, wenn Sie es6 verwenden.

Ich hoffe, das hilft.