预处理器(scss,less...)的安装
vue:在vue-cli或者create-vue中命令行初始化项目选择相应处理器
react:CRA创建的项目内置sass-loader预处理器(但是没有sass，需要自己安装sass),如果是less参考我的另一篇博客React基于craco自定义配置alias,less以及模块化，antd按需导入，环境变量 - 掘金 (juejin.cn)
预处理器的使用(全局作用域)
vue:
1.内联式：在style中添加lang="scss"
<style lang="scss">
//css样式...
</style>
2.**外联式:用@import导入
<style lang="scss">
@import 'xxx.css'
</style>
react:通过import导入
import 'xxx.scss'
局部作用域的处理
vue:在style中添加scope**
<style scope lang="scss">
//css样式...
</style>
react:
- 利用行内样式(驼峰命名)，不推荐，较为繁琐
<div style={{ color: 'black' }}></div>
- 利用css模块化
- 创建xxx.module.scss,正常写入样式**
//xxx.module.scss
.app{
color:red
}
2.导入css模块，在组件中给元素添加导入模块的类名
import style from 'xxx.module.scss'
//此时就是局部作用域了，渲染时会在类名后生成随机字符串
<div className={style.app}></div>
样式穿透(app是父组件元素，bpp是子组件元素)
vue:通过添加::v-deep
<style scope lang="scss">
/*此时会只影响当前组件下的所有类名为app的元素，因为默认给当前组件也加上scope生成的随机自定义属性
然后通过属性选择器选择当前组件+普通选择器的形式获取元素
(此组件以上的元素不影响，如果真的需要影响此组件以上的元素，建议通过全局css修改)*/
::v-deep .bpp{color:red}
</style>
react:利用预处理器的:global把子组件的类名声明为全局作用域
/*react的scope原理不是利用自定义属性，而是利用模块化在类型后生成随机字符串
所以如果你把.bpp声明为全局类名，此时如果全局有相同的类名也会受到影响
因此不建议直接使用单个:global穿透*/
//不推荐
:global(.bpp) {
color: red;
}
//在当前组件的元素下包裹你要穿透的样式，此时就可以达到::v-deep的自定义属性只影响当前组件下的元素的效果
//推荐
.app{
:global(.bpp) {
color: red;
}
}
//或者
.app{
:global{
.bpp{
color: red;
}
}
}
