react项目如何在不使用eject的情况下,达到scss模块化
react项目是通过create-react-app创建
scss模块化的意思是在多个scss文件中有相同的类名,样式不会污染
不用最外层嵌套唯一类名的这个方法
react项目如何在不使用eject的情况下,达到scss模块化
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
4条回答 默认 最新
- weixin_45099845 2023-02-10 11:44关注
在使用 create-react-app 创建的 React 项目中,您可以通过使用 CSS 模块实现 SCSS 模块化,而无需使用 eject。
CSS 模块允许你以模块化的方式编写 CSS,这样不同文件中的类名就不会相互冲突。 以下是如何在 React 项目中使用 CSS 模块的示例:
1、在 React 项目中创建一个 .scss 文件:例如,我们将其命名为 style.module.scss。
2、在 .scss 文件中写入您的样式:例如:.header { background-color: blue; padding: 20px; }
3、在你的 React 组件中导入 .scss 文件:例如,在你的 header.js 组件中:
import React from 'react'; import styles from './style.module.scss'; const Header = () => ( <header className={styles.header}> <h1>Hello World!</h1> </header> ); export default Header;
4、在 React 组件中应用样式:className 属性用于应用 .scss 文件中的样式。
请注意,.module.scss 扩展名很重要,因为它告诉 create-react-app 将文件视为 CSS 模块。 当你在 React 组件中导入 .scss 文件时,它会被转换成一个唯一的类名,从而防止类名冲突。这是一个简单的示例,但您可以根据需要创建任意数量的 .scss 文件,每个文件都有自己的一组唯一的类名,从而使您可以在 React 项目中实现 SCSS 模块化。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 目详情-五一模拟赛详情页
- ¥15 有了解d3和topogram.js库的吗?有偿请教
- ¥100 任意维数的K均值聚类
- ¥15 stamps做sbas-insar,时序沉降图怎么画
- ¥15 unity第一人称射击小游戏,有demo,在原脚本的基础上进行修改以达到要求
- ¥15 买了个传感器,根据商家发的代码和步骤使用但是代码报错了不会改,有没有人可以看看
- ¥15 关于#Java#的问题,如何解决?
- ¥15 加热介质是液体,换热器壳侧导热系数和总的导热系数怎么算
- ¥100 嵌入式系统基于PIC16F882和热敏电阻的数字温度计
- ¥15 cmd cl 0x000007b