在现代Web开发中，使用 CSS 样式表是不可避免的。然而，由于 CSS 具有全局作用域，很容易导致样式冲突和混杂。这时，React CSS Modules 就能为我们提供一种解决方案。Babel-plugin-react-css-modules 是 React CSS Modules 的一个插件，它可以让我们更方便地在 React 项目中使用 CSS Modules 技术，避免 CSS 样式冲突。
Babel-plugin-react-css-modules 的安装
在开始使用 Babel-plugin-react-css-modules 之前，需要先安装它：
npm install babel-plugin-react-css-modules --save-dev
Babel-plugin-react-css-modules 的配置
安装完成之后，需要在项目的 Babel 配置文件中添加该插件，可以添加到 .babelrc 或者 babel.config.js 文件中。
-- -------------------- ---- -------
-
---------- -
--------------------- -
------------ -
-------- -
--------- --------------
-
--
--------------------- -----------------------------------
--
-
-这里我们使用了两个比较重要的配置项：
filetypes：用来声明支持的文件类型，可以是 .css, .scss, .sass, .less 或者 .stylus 等。generateScopedName：用来生成唯一的类名。
Babel-plugin-react-css-modules 的使用
当我们配置好 Babel-plugin-react-css-modules 之后，可以开始使用它了。
1. 定义样式
首先，我们需要在定义样式时，使用 :local 关键字来声明这个样式是当地的。
.button:local {
color: blue;
}另外，我们还可以使用 :global 关键字来声明全局样式。
:global .clearfix {
overflow: hidden;
zoom: 1;
}2. 在组件中使用样式
在组件中，我们可以直接使用 styleName 属性来添加样式。
import React from 'react';
import styles from './button.css';
class Button extends React.Component {
render() {
return <button styleName="button">Click me!</button>;
}
}在这个例子中，我们引入了 button.css 文件，并使用 styles 对象来获取其中定义的样式。然后，我们在 <button> 元素中使用 styleName 属性来应用样式。
3. 为样式添加变量
有时候，我们需要在样式中添加一些变量，来让样式更具可读性和可维护性。我们可以使用 :export 关键字来定义这些变量。
:local {
@value primary-blue: blue;
@value primary-red: red;
}
.button:local {
color: :export(primary-blue);
}定义完成之后，我们可以在组件中通过 this.props 对象来访问这些变量。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
----- ------ ------- --------------- -
-------- -
----- - ----------- - - -----------
------ ------- ------------------ -------- ------ ----------- -------- -------------
-
-
------------------- - -
------------ -----------------------
--在这个例子中，我们通过 styles['primary-blue'] 来获取定义的变量。
总结
通过 Babel-plugin-react-css-modules 的支持，我们可以更方便地使用 CSS Modules 技术，为我们的 React 项目解决样式冲突的问题。同时，我们还可以为样式添加变量，增加可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec1aabf6b2d6eab366750a