前端 - React中什么是module css？

Question

什么是module css？

我们在学习React 的时候，经常看到module CSS的说法。

请问下我们自定义组件，将CSS文件放在index.tsx同级别目录下是否属于module CSS呢？

.CustomComponent
|
 --- index.tsx
 --- index.css

Answer 1

没有 module CSS，只有 CSS Module 的概念。可以参考一下阮一峰的这篇blog。

简而言之，CSS Module就是为 CSS 提供局部作用域，在 CSS Module 中定义的类名，你不需要担心它们会和其它的文件重复，因为在编译的时候都会被 hash 化。

Answer 2

在 React 中，如果你直接在文件中引入 index.css，当父组件和子孙组件的 class 属性相同时，那么会发生 CSS 样式覆盖的问题。如果解决样式覆盖的问题呢？
1.使用 BEM 来解决命名冲突，人为手动为每个 class 属性起一个唯一的名字;
2.使用 CSS Modules，自动对 CSS 的 class 属性重命名，保证每一个 class 属性的唯一性;
手动维护 class 属性的唯一性太累了，所以使用 CSS Modules 是最方便的，CSS Modules 的出现，就是为了解决 CSS 在 React 中的样式冲突和覆盖等问题的。

Answer 3

module CSS是一种将CSS模块化的技术，它可以让你在一个文件中定义样式，并且保证这些样式只会作用于当前组件。
这种方式的好处是可以避免全局命名空间的污染，而且可以使得每个组件都能独立定义样式，方便组件的复用和维护。
在使用module CSS时，你需要先安装支持此功能的CSS预处理器，如Sass或Less。然后，在定义样式时，你需要将CSS文件的扩展名改为.module.scss或.module.less等，注意，样式文件的后缀必须为.module.css的形式。如果不符合这些条件，CSS module功能会自动忽略该文件。