react 中 node-sass-chokidar 的替代文案dart-sass 以及package.json 的替代配置方案

前提 你eject 开启了哈，要不是用不了。

除了src public 要有config scripts 以及更多的package.json

网上各种 都是  说升级啦 
各种说词

单都没有修改配置文件的
------


node-sass-chokidar 按装的时候经常报错，导致有人一分就ok 
有人的要十次 二十次还不一定能成功

那怎么办，react 不支持dart-sass 

但可以使用一种方案，你看到的不一定为真来绕过react 

先说一下，如果你使用node-sass-chokidar 也是完全没有问题的
但你想换其他的，那同样也有解决文案


index.tsx

import './styles/index.css';

src/styles
    styles/
            index.scss
            _test.scss
            _a.scss

项目 sass（scss）安装

yarn add node-sass-chokidar
yarn add npm-run-all

修改package.json(替换 script 代码块 换成以下代码)

"scripts": {
        "build-css": "node-sass-chokidar src/ -o src/",
        "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive  --use-polling --polling-interval 1000",
        "start-js": "node scripts/start.js",
        "start": "npm-run-all -p watch-css start-js",
        "build-js": "node scripts/build.js",
        "build": "npm-run-all build-css build-js",
        "test": "node scripts/test.js --env=jsdom"
},

项目 dart-sass

yarn add node-sass@npm:dart-sass
yarn add dart-sass
按装包 
可以把 node-sass 删除掉了
也可以把node-sass-chokidar 删除掉了
yarn remove node-sass
yarn remove node-sass-chokidar

yarn add node-sass@npm:dart-sass

修改package.json(替换 script 代码块 换成以下代码)

"scripts": {
    "build-css": "sass src/",
    "watch-css": "npm run build-css && sass src/ --watch",
    "start-js": "node scripts/start.js",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "node scripts/build.js",
    "build": "npm-run-all build-css build-js",
    "test": "node scripts/test.js --env=jsdom"
  },

如果win 下sass 无法启动，换成dart-sass

"scripts": {
    "build-css": "dart-sass src/",
    "watch-css": "npm run build-css && dart-sass src/ --watch",
    "start-js": "node scripts/start.js",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "node scripts/build.js",
    "build": "npm-run-all build-css build-js",
    "test": "node scripts/test.js --env=jsdom"
  },

src/styles/index.scss
会生成 map 文件
这个没去掉  嘻嘻
打包时不带map 文件

另防止文件生成一些css 文件

可以除了了 index.scss
其他使用 _a.scss  _b.scss

index.scss  @import '_a.scss';
除了index 就不会有其他css 文件了。