项目中要加入新设备，为了不影响原来的代码，就分离出来一份。但入口文件中导入了之前的模块（用于根据型号来判断），发现即使导入的模块没有用到，如果模块里导入了.less文件，则这些less样式仍然是对全局生效。经研究，决定引入。
网上查到的用法基本都让修改项目根目录下的，但我的项目根目录下没找到这个文件，一同事说要在modules里找，我找到了webpack目录，但是没有这个配置文件。
后来网上查到修改node_modules\react-scripts\config\路径下的和文件（网址/zz__zzmomo/article/details/83900657），可能因版本关系，只找到了，把文章中设置css和less支持的相关代码配置到oneOf: []中，运行时提示找不到getCSSModuleLocalIdent。大概还是版本原因，我在另一个项目里找到这个js文件，全局一搜，发现是在react-dev-utils模块下，再往上搜到父模块是react-scripts，而且这两个祖先模块版本号远低于使用项目中的版本。于是改中的react-scripts版本号到3.3.0，重新安装依赖，这时又报错
Cannot find module 'D:\git\……\node_modules\react-scripts/config/'
，错误的祖先位置在\react-app-rewired中，再手动升级版本，重装依赖，然后又报错
We detected TypeScript in your project (src\……/select-pop/) and created a file for you.
It looks like you're trying to use TypeScript but do not have typescript installed.
再安装typeScript后，又报错
The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - /a
rackaf/customize-cra#available-plugins
再安装customize-cra，仍然报错不变。又仿照用过的项目中的文件把原来用injectBabelPlugin的写法改了一遍。再运行，浏览器这次打开了，但仍然报错
ypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
at validateString (internal/:117:11)
at (:375:7)
……、
这个问题前两天刚解决过，是react-dev-utils版本升级导致的，但降版本后没好，仍然报错，
干脆一不做二不休，干脆把这块卸载了清缓存重装，安装最新版本，装完后react-dev-utils的版本号已经是10.2.0了，运行，报错信息已经变了，看来最新版本已经修复。这时报错
Parsing error: Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` i
nstead.
什么鬼，我代码一直好好的现在居然报错了！网查，在里面添加addDecoratorsLegacy(),如下
= override(
addDecoratorsLegacy(), //新添加
fixBabelImports('import', [{
libraryName: '@uplus/uplus-api',
libraryDirectory: 'es',
style: 'css'
}, {
libraryName: 'antd-mobile',
libraryDirectory: 'es',
style: 'css'
}]),
);然后再跑，发现app里面不报错了，但另一个组件仍然报同样的错误！同时编辑器在代码中报错
TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
经查找，大概是
由于注解方式在当前的开发环境种只是一个 ECMA 标准的未来式，所以要在 eslint，babel，和tsconfig 中做响应的支持。
但对应的解决方案中，配置babelrc却没起作用，大概也是版本不同的问题；typescript配置了也未解决问题。实在没办法了，就把所有 export default class …… 这样的形式拆开，先定义后导出，终于不报这个错了，而是报了一串错误：
Line 44:60: 'mac' is not defined no-undef
Line 73:43: 'optStep' is not defined no-undef
Line 74:9: '……' is not defined no-undef
Line 50:26: Unexpected use of 'location' no-restricted-globals
……主要是不允许直接使用全局变量(包括自定义和location这样window自带的)，在前面加上“window.”就解决了，再跑，再报错找不到babel-preset-env。
安装，再跑，又报错
Could not find a declaration file for module 'classnames'.'D:/git/……/node_modules/classnames/' implicitly has an 'any' type.
Try `npm install @types/classnames` if it exists or add a new declaration (.) file containing `declare module 'classnames';` TS7016
按照提示再安装@types/classnames，再跑，等了半天，页面空白，控制台出现了长长一串错误，主要有以下几类：
- no-unused-vars
- no-useless-constructor
- no-mixed-operators
- jsx-a11y/no-distracting-elements
改了有好几十处，连过时的走马灯元素也暂时屏蔽了，终于不报错了！但发现Less根本没起作用。改造引入写法： className={styles['work-mode ']}，仍不见效
回头看看里面的oneof，只是支持css,sass，没有支持less!
再安装node-sass,装了2遍后成功，把less后缀改为.scss，变量前的@全部换成$，运行，终于看到久违的背景图了，自己写的样式终于生效，但很悲剧的是antd插件内置的样式没有了！
试了很多方法，比如添加以下规则到oneof中：
// 针对antd不开启CSS Modules处理
{
test: /\.css$/,
include: [/[\\/]node_modules[\\/].*antd/],
use: [
{loader: 'style-loader'},
{loader: 'css-loader'}
]
},还有
{
test: cssRegex,
include: /node_modules|antd-mobile\.css/,
use: getStyleLoaders({
importLoaders: 1,
modules:false
}),
}等等，皆无效！
这时看时间已经夜里12点多，感觉浑身疲乏心力憔悴，主要原因还是相关技术基础缺乏，英文资料阅读不够深入，后期得先从补基础开始了。考虑到这样即使调通，因部分版本升级带来的更多未知隐患还不知要耗费多少精力，避免不了要影响工作进度，于是，我决定：
暂时放弃！┭┮﹏┭┮
改用老办法，在body上加入设备型号名称来限定css作用域……
后记
两个月后，手边一个新项目里，直接开启即可，什么都不用配……
只需要把scss文件的名字写成 ***. 这样，然后引入到js中，使用如下：
// 文件
.recipeList { // 这个class名可以在组件直接引用，系统会给名字加上随机后缀。我经常用于组件最外层。
overflow: hidden;
:global { // :global这个写法可让下面的属性对本组件内部的第三方插件也起作用，相当于vue中的 >>>
.am-list {
.list-view-section-body {
background: #fff;
display: flex;
}
}
}
}
// js文件
import style from './'
……
return <div className={}>
组件内容
</div>当前的环境
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"@uplus/uplus-api": "^3.1.0-beta.10",
"antd": "^4.3.0",
"antd-mobile": "^2.3.3",
"antd-mobile-upload": "^1.0.7",
"axios": "^0.19.2",
"lrz": "^4.9.40",
"rc-form": "^2.4.11",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1"
},
"devDependencies": {
"antd-img-crop": "^3.4.0",
"babel-plugin-import": "^1.13.0",
"core-js": "^3.6.5",
"crypto-js": "^4.0.0",
"customize-cra": "^0.9.1",
"jquery": "^3.5.1",
"node-sass": "^4.14.1",
"react-app-rewired": "^2.1.6"
},