在前端开发中，CSS 的模块化一直是一个比较麻烦的问题。传统的 CSS 只能使用全局样式，容易出现样式冲突的问题。因此，CSS 模块化的出现，可以有效地解决这个问题。
Babel-plugin-react-css-modules 是一个对 React 组件中的 CSS 进行模块化打包的工具。它可以让你在 React 组件中使用 CSS Modules 语法，在打包时自动处理为模块化的 CSS。
安装和配置 Babel-plugin-react-css-modules
在使用 Babel-plugin-react-css-modules 之前，需要先安装配置它。在项目中先安装 Babel-plugin-react-css-modules，命令如下：
npm i babel-plugin-react-css-modules -D
安装之后，在项目根目录下创建一个 .babelrc 文件，然后在里面添加如下配置：
-- -------------------- ---- -------
-
---------- -
---------------------------------- -
------------ -
-------- -
--------- --------------
-
--
--------------------- ----------------
---------------------------- ----
--
-
-Babel-plugin-react-css-modules 的使用
在配置完成之后，我们就可以在 React 代码中使用 CSS Modules 语法了。只需要在 import 样式的时候，添加 ?modules 选项即可：
import styles from './example.module.css';
这样打包之后，styles 就是一个对象，里面包含了对应样式名的值。我们可以直接通过 styles.样式名 的方式来使用它。
<div className={styles.container}>Hello, world</div>当我们编写完 React 组件，进行打包时，Babel-plugin-react-css-modules 就会自动处理 CSS，生成对应的模块化样式文件。
配置 SCSS 和其他语法
上面的配置中，我们只是介绍了 CSS 文件的配置。实际上，Babel-plugin-react-css-modules 还支持 SCSS 和 LESS 的语法。
我们只需要修改 .babelrc 的配置文件，添加对应的语法支持即可。
-- -------------------- ---- -------
-
---------- -
---------------------------------- -
------------ -
-------- -
--------- --------------
--
-------- -
--------- --------------
-
--
--------------------- ----------------
---------------------------- ----
--
-
-如上配置，我们添加了对 SCSS 和 LESS 文件的语法支持。
总结
利用 Babel-plugin-react-css-modules 进行 CSS 模块化可以有效地避免全局样式的冲突问题，并且使得 CSS 代码更加可维护。它的配置相对简单，只需按照上述配置即可使用。
示例代码：
// example.module.css
.container {
background-color: #fff;
color: #333;
padding: 10px 20px;
border-radius: 4px;
}-- -------------------- ---- ------- -- ---------- ------ ----- ---- -------- ------ ------ ---- ----------------------- ----- ------- - -- -- - ------ ---- ----------------------------------- ------------ -- ------ ------- --------
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6534ac9c7d4982a6eb9afc2b