CSS Modules是一个css文件，包含所有的类名和动画名，默认是局部，而:global的方式是全局的。
1.当引入一个CSS Modules到一个js文件里时，它导出的是一个对象。
import styles from "./style.css";
// import { className } from "./style.css";
element.innerHTML = '<div class="' + styles.className + '">';
2.全局的写法
css文件时：global(.xxx)
less文件时
:global {
.global-class-name {
color: green;
}
}
3.为什么使用CSS Modules？
模块化并重用css
(1)不会造成冲突
(2)更明确的依赖关系
(3)没有全局的
4.关于webpack
webpack里面有一个css-loader，它有一个参数modules决定是否使用CSS Modules，css-loader把所有局部空间标识用全局独特的名字代替，然后导出用过的标识。
网友评论