Webpack-dev-server bundling React JS but not SCSS

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();

I do. -> ```@import 'body'; @import 'app'; @import 'canvas'; body { background-color: red; }``` — Juozas Rastenis, Aug 25 '18 at 17:26
open the bundled file to see if you can see `body { background-color: red; }` inside — Olivier Boissé, Aug 25 '18 at 17:29
I do not see it there, it is just default browser body css: ```body { display: block; margin: 8px; }``` — Juozas Rastenis, Aug 25 '18 at 17:31
I will add a repo https://github.com/ankeris/challengefriend — Juozas Rastenis, Aug 25 '18 at 17:32
`react-create-app` doesn't use you webpack config (it has it owns config) that's why you don't see your styles — Olivier Boissé, Aug 25 '18 at 18:05
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc to add sass to create react app project — Olivier Boissé, Aug 25 '18 at 18:12

score 1 · Answer 1 · answered Aug 25 '18 at 17:32

1

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

answered Aug 25 '18 at 17:32

Does not work, I have tried both options (I think they both should work, otherwise webpack would throw an error) – Juozas Rastenis Aug 25 '18 at 17:35

score 1 · Accepted Answer · answered Aug 25 '18 at 18:35

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

Yes, it is working indeed. It is important to understand that react-create-app uses its own webpack config behind the scene. However, "npm-run-all" is not needed to achieve the result, but helps with the productivity :) — Juozas Rastenis, Aug 25 '18 at 18:45

Webpack-dev-server bundling React JS but not SCSS

2 Answers2