这篇文章主要介绍“React中如何使用scss”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“React中如何使用scss”文章能帮助大家解决问题。
首先导入node-sass npm i node-sass -D
编写样式文件header.scss， header.module.scss 两个样式文件一样，只是文件名不同
计算
安全
数据库
网络和加速
企业服务
.header-box {
display: flex;
div {
font-size: 60px;
}
}导入样式文件import './styles/header.scss'
import React from 'react'
import from './styles/header.module.scss'
export default class HeaderDom extends React.Component {
constructor() {
super()
}
render() {
return (
<div className='header-box'>
<div>Hello World</div>
</div>
)
}
}结果
React 中使用scss加上scoped 导入样式文件
import headerStyle from './styles/header.module.scss'import React from 'react'
import headerStyle from './styles/header.module.scss'
export default class HeaderDom extends React.Component {
constructor() {
super()
console.log(headerStyle)
}
render() {
return (
<div className={ headerStyle['header-box']}>
<div>Hello World</div>
</div>
)
}
}结果 在普通的样式上面添加了唯一值
最外层写.root类名
里面有:global包裹
再写具体的类型 写具体的样式
.root {
height: 100%;
:global {
.content {
position: relative;
z-index: 1;
height: 100%;
}
}先引入样式文件import styles from './index.module.scss'
最外层的div里面写className="styles.root"
后面的类名写具体的类名就行
例子：
关于“React中如何使用scss”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/weixin_43972992/article/details/107887588
