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把所有局部空间标识用全局独特的名字代替,然后导出用过的标识。