方案
在Vue中不用担心什么css冲突的问题,但是在React中好像一直都没有什么标准化的解决方案
了解了一下目前主流的方案有
- CSS Module
- CSS in JS
- 原子化CSS
其中CSS in JS首先不考虑,因为我觉得这种方案脱离了JS CSS分离的原则
CSS Module
在vite中CSS Module 默认是启用的 不需要额外配置 详见 共享选项 | Vite 官方中文文档 (vitejs.dev)
在昨天模态框组件的基础上建一个index.module.css
.a {
font-size: 20px;
}
.b {
font-size: 40px;
}
可以看到类名有被正确编译
原子化CSS
目前主流的方案是TailwindCSS UnoCSS等 个人习惯是tailwind
跟着官网配一次就行了,我的template中默认集成了 用起来很爽我写vue也用tailwind
