React中的CSS局部引入过程

2023-03-29 09:17:43 作者：King_960725

这篇文章主要介绍了React中的CSS局部引入过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

React中CSS局部引入

在新项目创建好时，使用命令yarn eject，显示配置文件

打开config/webpack.config.js

在检测CSS的地方(426行)添加如下

modules: true,
getLocalIdent: getCSSModuleLocalIdent,

使用：

import style from './TestCss.css';
<span className={style.one}>hello</span>
<span id={style.two}>world</span>

1、安装node-sass包 yarn add node-sass

2、创建sass文件(以.scss为后缀名，在内部写css代码)

.TestSass {
span {
    color: red;
    }
}

3、引入对应的JS文件或者JSX文件

import 'TestSass.scss'

在这里插入图片描述

//修改对象属性名字，前面是被修改的属性名字，后面是修改后的属性名
JSON.parse(JSON.stringify(item).replace(/_id/g, "key"))

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。