在 React 中，我们通常使用 CSS 来美化我们的页面，但是在大型项目中，CSS 的命名冲突和管理会成为一个问题。为了解决这个问题，CSS Modules 应运而生。
什么是 CSS Modules
CSS Modules 是一个将 CSS 文件转换为局部作用域的方案。它使用 webpack 等构建工具来实现，可以避免全局 CSS 命名冲突，并提供了一些有用的特性，如自动前缀和变量。
如何在 React 中使用 CSS Modules
首先，我们需要在 webpack 中配置 CSS Modules。在 webpack 的配置文件中，我们可以使用 css-loader 和 style-loader 来处理 CSS 文件，并使用 modules 选项来开启 CSS Modules：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- ----
-
-
--
-------- ----------------
--
-
----- ---------
---- ---------------- --------------
-------- ----------------
-
-
-
--在这个例子中，我们使用 include 和 exclude 选项来分别处理 CSS Modules 和普通的 CSS 文件。
在 React 中，我们可以使用 className 属性来引用 CSS Modules 中的样式。例如，如果我们有一个名为 button.module.css 的 CSS Modules 文件，其中定义了一个名为 button 的类：
.button {
background-color: blue;
color: white;
}我们可以在 React 组件中这样使用：
import React from 'react';
import styles from './button.module.css';
function Button() {
return <button className={styles.button}>Click me</button>;
}
export default Button;这里的 styles.button 是一个字符串，它代表了 CSS Modules 中 button 类的局部作用域名称。
其他有用的特性
自动前缀
CSS Modules 还提供了自动前缀的功能，可以自动为 CSS 样式添加浏览器前缀。要启用此功能，我们可以使用 postcss-loader 和 autoprefixer 插件：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- ----
-
--
----------------
--
-------- ----------------
--
-
----- ---------
---- ---------------- ------------- ------------------
-------- ----------------
-
-
-
--然后，我们需要在项目根目录下创建一个名为 postcss.config.js 的文件，并配置 autoprefixer 插件：
module.exports = {
plugins: [require('autoprefixer')]
};变量
CSS Modules 还支持变量，我们可以在 CSS 中定义变量，并在组件中使用。例如，如果我们有一个名为 variables.module.css 的 CSS Modules 文件，其中定义了一些变量：
:root {
--primary-color: blue;
--secondary-color: red;
}我们可以在组件中这样使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- -------------------------
-------- -------- -
------ -
------- -------- ---------------- ------------------------- ---
----- --
---------
--
-
------ ------- -------在这里，我们使用了 CSS Modules 中的 --primary-color 变量来设置按钮的背景颜色。
总结
CSS Modules 是一个很好的解决方案，可以避免 CSS 命名冲突，并提供了一些有用的特性。在 React 中使用 CSS Modules 非常简单，只需要在 webpack 中配置并在组件中使用局部作用域名称即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6510a71995b1f8cacd91a3b7