Webpack - Build css nicht angewendet

Question

Ich bin neu in ReactJS. Ich versuche SCSS zu verwenden, in reagieren sass Ladern sieht

Meine webpack config wie this-

var webpack = require('webpack'); 
var path = require('path'); 

var APP_DIR = path.resolve(__dirname + 'react-js/src/'); 
var BUILD_DIR = path.resolve(__dirname, 'react-js/dist/'); 

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

module.exports = { 
    entry: './react-js/src/index.jsx', 
    output: { 
     path: BUILD_DIR, 
     publicPath: '/dist', 
     filename: 'bundle.js' 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader', 
        publicPath: '/dist' 
       }) 
      }, 
      { 
       test: /\.scss$/, 
       loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader!sass-loader', 
        publicPath: '/dist' 
       }) 
      }, 
      { 
       test: /\.(js|jsx)$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['react', 'es2015'] 
       } 
      } 
     ] 
    }, 
    plugins: [ 
     new ExtractTextPlugin('styles.css'), 
    ] 
} 

Alle diese Konfigurationen von dort jeweiligen Dokumentationen waren.

.

Als ich webpack-dev-Server ausführen zeigt es folgende Output-

Dies ist der Bildschirm, wenn ich eine SCSS Datei speichern - Hinweis - Ich habe entfernt die ExtractTextPlugin aus meiner Webpack-Konfigurationsdatei.

Verzeichnisstruktur -

ich einfach nicht begreifen, wie es nicht auf die gerenderte importiert wird reagieren App. Ich dachte, das Importieren der scss-Datei in index.jsx, wie unten gezeigt, macht die css-Datei zu ihrer Abhängigkeit, aber es funktioniert nicht.

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

import App from './app'; 

import style from '../../scss/main.scss'; 

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

Warum?

Edited

Package.json

{ 
    "name": "skippo-vendor-admin-webui", 
    "version": "1.0.0", 
    "description": "", 
    "main": "./react-js/src/index.jsx", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "dev": "./node_modules/.bin/webpack -d --progress --colors", 
    "prod": "./node_modules/.bin/webpack -p --progress --colors", 
    "watch": "./node_modules/.bin/webpack -d --progress --colors --watch", 
    "start": "./node_modules/.bin/webpack-dev-server --progress --colors --hot --inline --contentBase './react-js/'" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "chai": "^3.5.0", 
    "css-loader": "^0.28.1", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "karma": "^1.6.0", 
    "karma-chai": "^0.1.0", 
    "karma-chrome-launcher": "^2.1.1", 
    "karma-mocha": "^1.3.0", 
    "karma-sinon": "^1.0.5", 
    "karma-webpack": "^2.0.3", 
    "mocha": "^3.3.0", 
    "node-sass": "^4.5.2", 
    "sass-loader": "^6.0.3", 
    "sinon": "^2.2.0", 
    "style-loader": "^0.17.0" 
    }, 
    "dependencies": { 
    "react": "^15.5.4", 
    "react-dom": "^15.5.4", 
    "react-redux": "^5.0.4", 
    "react-router": "^4.1.1" 
    } 
} 

Answer 1

Ändern Sie diese Zeile

import style from '../../scss/main.scss'; 

Mit

import '../../scss/main.scss'; 

Answer 2

Die ExtractTextPlugin sollte nur für Ihren Produktions-Build verwendet werden, da es eine separate kompilierte CSS-Datei erstellt, die ohne spezielle Behandlung bedient werden kann.

Für die Entwicklung, können Sie diese Regel verwenden statt:

{ 
    test: /\.s?css$/, 
    use: ['style-loader', 'css-loader', 'sass-loader'], 
} 

Installieren Sie die 3 Lader als Entwickler Abhängigkeit, wenn man sie nicht haben.

Sie müssen beim Importieren einer scss-Datei auch keinen Namen angeben, importieren Sie sie einfach.

import '../../scss/main.scss';