随着 React 技术的不断发展，CSS Modules 这种开发方式也越来越受前端工程师的欢迎。它能够在 React 组件内部实现 CSS 模块化，提高开发效率和代码可维护性。但是，使用 CSS Modules 也存在一些问题，其中一个就是组件和样式文件的相对路径问题。这时我们就可以使用 npm 包 @hylo/babel-plugin-react-css-modules 来解决这个问题。
什么是 @hylo/babel-plugin-react-css-modules？
@hylo/babel-plugin-react-css-modules 是一个 Babel 插件，用于解决使用 CSS Modules 时组件和样式文件的相对路径问题。它会自动将 CSS Modules 导入代码注入到 React 组件中，然后使用 React 专属的样式方式处理。
安装
在项目的根目录下使用 npm 安装 @hylo/babel-plugin-react-css-modules：
npm install @hylo/babel-plugin-react-css-modules --save-dev
配置
在项目的 babel 配置文件（通常是 .babelrc 或 babel.config.js）中添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
---------------------------------------
-
------------ -
-------- -
--------- --------------
-
--
--------------------- -----------------------------------
-
-
-
-这里我们指定了 .scss 文件使用 postcss-scss 语法，以及定义了样式名称的生成方式。
使用
使用 @hylo/babel-plugin-react-css-modules 的方式与普通的 CSS Modules 完全相同，只是无需关心相对路径的问题。比如，我们可以这样导入样式：
import styles from './styles.scss';
然后使用 styles 对象中的样式名称即可：
<div className={styles.container}>
<h1 className={styles.title}>Hello, World!</h1>
</div>这里的 styles.container 和 styles.title 的值都是动态生成的，无需手动指定。
示例代码
下面是一个简单的示例代码，使用 React 和 @hylo/babel-plugin-react-css-modules 实现一个带有样式的按钮组件：
-- -------------------- ---- -------
-- --------
------ ----- ---- --------
------ ------ ---- ----------------
----- ------ - ------- -- -
----- - --------- ------- - - ------
------ -
------- ------------------------- ------------------
----------
---------
--
--
------ ------- -------// Button.scss
.button {
background-color: blue;
color: white;
}在调用 Button 组件时，可以用以下方式导入和使用：
-- -------------------- ---- -------
------ ------ ---- -----------
----- --- - -- -- -
----- ----------- - -- -- -
-----------------------
--
------ -
-----
------- --------------------------- ------------
------
--
--使用 @hylo/babel-plugin-react-css-modules，我们无需手动指定样式名称，也无需担心组件和样式文件的相对路径问题。这样就能够更加高效地使用 CSS Modules 开发 React 组件了。
总结
@hylo/babel-plugin-react-css-modules 是一个能够简化 React + CSS Modules 开发的工具，能够解决组件和样式文件的相对路径问题。使用开发人员可以更加专注于业务代码的编写，提高代码的可维护性和开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556d681e8991b448d3ae1