React中的CSS局部引入过程

目录

• React中CSS局部引入
• 配置Webpack模块化导入CSS
• 在React项目中使用Sass
• React局部样式和其他小问题

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

React中CSS局部引入

配置Webpack模块化导入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>

在React项目中使用Sass

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

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

.TestSass {
span {
    color: red;
    }
}

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

import 'TestSass.scss'

React局部样式和其他小问题

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