CSS Modules 简讲 快速理解

CSS Modules

首先它是做什么用的

一句话，解决了样式局部作用域和模块依赖

如何使用

1. 引入样式文件 import style from './App.css'
2. 元素上使用 <h1 class={style.title}> Hello World </ h1>

实现原理

1. 构建工具会将类名style.title进行编译，编译成一个哈希字符串。
2. 同时css文件内也会被进行同样的编译
3. 这样直观类名就变成了一个独一无二的类名了，只对该组件有效

功能细讲

1. 全局作用 :global(.title)  
• 在css中这样声明不会被编译成哈希字符串。
• 而其他页面就正常定义类名即可。
• 比如，react 就是 className='title'。
2. 组合 composes
• 在这个css里面可以让一个选择器继承另一个选择器的规则
• 比如 定义样式 .appA .appB
• 那么在 .appB 中编译 composes:appA 即可使appB继承appA的样式
• 同时也可以引入其他文件里面的规则
• composes: 类名 from '路径'   即可
3. 支持引入变量，比较复杂，这个就不讲在这里了，想学的可以去阮一峰大神的文档