How to watch sass folder for changes without compiling in css in react

Question

Curreny my scripts in package.json looks like this:

"scripts": {
    "build-css": "node-sass-chokidar src/styles/ -o src/styles/",
    "watch-css": "npm run build-css && node-sass-chokidar src/styles/ -o src/styles/ --watch --recursive"
  }

When I type npm run watch-css It watches and compiles all my scss files into css. And I import compiled css file in my react component like this import '../styles/component.css'

I need to find a way to import not css file but scss file and with special command like npm run watch-scss see all the changes I make in my scss file.

PS: I'm using create-react-app

Answer 1

CRA abstracts away the build configuration logic for simplicity. If you want to add custom build logic, you need to opt out of the abstracted version using this command: npm run eject

This will run a script to expose the webpack build configurations. From there, you need to add a sass loader for webpack.

guide: https://medium.com/@Connorelsea/using-sass-with-create-react-app-7125d6913760