CSS Modules
首先它是做什么用的
一句话,解决了样式局部作用域和模块依赖
如何使用
- 引入样式文件 import style from './App.css'
- 元素上使用 <h1 class={style.title}> Hello World </ h1>
实现原理
- 构建工具会将类名style.title进行编译,编译成一个哈希字符串。
- 同时css文件内也会被进行同样的编译
- 这样直观类名就变成了一个独一无二的类名了,只对该组件有效
功能细讲
- 全局作用 :global(.title)
- 在css中这样声明不会被编译成哈希字符串。
- 而其他页面就正常定义类名即可。
- 比如,react 就是 className='title'。
- 组合 composes
- 在这个css里面可以让一个选择器继承另一个选择器的规则
- 比如 定义样式 .appA .appB
- 那么在 .appB 中编译 composes:appA 即可使appB继承appA的样式
- 同时也可以引入其他文件里面的规则
- composes: 类名 from '路径' 即可
- 支持引入变量,比较复杂,这个就不讲在这里了,想学的可以去阮一峰大神的文档