Webpack - Build css not applied - reactjs

Question

I am new to ReactJS. I am trying to use scss in react using sass-loaders
My webpack config looks like 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'),
]
}
All these configurations were from there respective documentations.
.
When I run webpack-dev-server it shows following output-
This is the screen when I save a scss file -
Note - I have removed the ExtractTextPlugin from my webpack config file.
Directory structure -
I just don't realise how it's not imported to the rendered react app. I thought importing the scss file in index.jsx like shown below will make the css file it's dependency, but it doesn't work.
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')
);
Why?
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

The ExtractTextPlugin should only be used for your production build, since it will create a separate compiled css file that can be served without any special treatment.
For development, you can use this rule instead:
{
test: /\.s?css$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
Install the 3 loaders as a dev dependency if you don't have them.
Also you don't need to specify a name when you import a scss file, just import it.
import '../../scss/main.scss';

Answer 2

Change this line
import style from '../../scss/main.scss';
With
import '../../scss/main.scss';