React中的CSS局部引入过程是什么

这篇文章主要介绍了React中的CSS局部引入过程是什么的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇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"))

关于“React中的CSS局部引入过程是什么”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“React中的CSS局部引入过程是什么”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。