react安装scss 遇到的坑

crate-react-app 脚手架创建react项目

$ npm install node-sass --save
$ # or
$ yarn add node-sass

参考:https://create-react-app.dev/docs/adding-a-sass-stylesheet

2.node-sass (版本过过高)

node-sass@6.0.0 postinstall: `node scripts/build.js`

参考:https://github.com/sass/node-sass
参照:https://www.npmjs.com/package/node-sass

3.node-sass与sass-loader不匹配

Node Sass version 5.0.0 is incompatible with ^4.0.0.
// 卸载node-sass
npm uninstall node-sass
// 然后安装4.x版本（5.0之前）
npm install node-sass@4.14.1

4.sass-loader(版本过高)

TypeError: this.getOptions is not a function

参考:https://www.npmjs.com/package/sass-loader
5.安装scss 的依赖

npm i sass-loader@7.2.0 node-sass@4.14.1 -D

版本配置:

crate-react-app:v4.0.3
node:v10.16.0
"node-sass": "^4.14.1",
"sass-loader": "^7.2.0"

小结:

1.创建项目时,保持项目最新状态,例如: 目前node 最新:V16.3.0 ,crate-react-app最新v4.0.3 就没有版本问题,如何进行node版本管理,参考:https://editor.csdn.net/md/?articleId=109461708
2.根据自己的node 版本进行降级处理
node : https://nodejs.org/zh-cn/download/releases/
node-sass:https://www.npmjs.com/package/node-sass
sass-loader:https://www.npmjs.com/package/sass-loader
根据软件开发年限进行匹配 (以上情况也适用 npm 其他安装依赖)
node

node-sass

sass-loader