CSS Modules ,官方解释如下:
CSS files in which all class names and animation names are scoped locally by default.
翻译结果:
CSS 的类名和动画名字都在一个命名空间下。
例子:
// test.css .box{ color:red; }
import style from 'test.css' function Test(){ return (<div class={style.box} />) }
伪输出:
<div class="_styles__box_34682763478"></div>
总的来说,CSS Modules 做了一件时,混淆了 class 类名、id 和动画名
CSS Modules 原理上仍是传统的 CSS 编写方式,只不过它混淆了名称,并添加了映射