Webpack-dev-server bundling React JS but not SCSS - reactjs

Question

App was made by "create-react-app" command. Bundled (by webpack) JavaScript code is working properly in my React App, but it does not seem to get any styling from SASS. There are no errors in console or anywhere, it's just being ignored. To start webpack I am running "npm run start".
Repo just in case: https://github.com/ankeris/challengefriend
This is the code:
package.json
"scripts": {
"start": "webpack-dev-server --open --mode development --hot | react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.22.1",
"webpack": "^4.17.1",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.5"
}
webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve('dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
},
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import './styles/scss/index.scss';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

To make it worked, I followed this link it tells you how to add css preprocessor in react-create-app, here are the commands to run :
npm install --save node-sass-chokidar
npm install --save npm-run-all
then add these lines in your package.json (in the scripts section) :
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
in your file index.js replace import './styles/scss/index.scss'; by import './styles/scss/index.css';
Finally you can start your app by running npm start
As I said in comment, react-create-app uses its own webpack config, so your webpack.config.js is useless you can remove it from your project
If you really want to import the scss file, then you need to modify the default react-create-app webpack config, you need to run npm run eject to extract the config, then modify the files /config/webpack.config.{env}.js

Answer 2

It should be loaders because you are using Webpack 4.
Please add below rule in Webpack and try
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}