Less/sass is referenced in the project created by create-react-app

problem description

added sass, according to the configuration of the official website, but there are two shortcomings. I don"t know whether the configuration can be optimized
https://github.com/facebook/c.

.

one is that the .scss file cannot be referenced directly in the component, but only the compiled .css (the code is as follows); another problem is that each new .scss , node-sass-chokidar does not seem to be able to listen for changes and then recompile, you need to restart the project manually

related codes

Tabs.jsx

"scripts": {
    "build-css": "node-sass-chokidar src / -o src /",
    "watch-css": "npm run build-css && node-sass-chokidar src / -o src / --watch --recursive",
    "_start": "react-scripts start",
    "_build": "react-scripts build",
    "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",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

is there something wrong with my configuration? Is there a better choice?

Jun.04,2021

you should configure less-loader , and then introduce the .less file directly into react. Instead of compiling to css before introducing. In that case, you might as well write css directly.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b37942-2c088.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b37942-2c088.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?