关于CSS Modules

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

原文链接：https://github.com/css-modules/css-modules

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容