简介
在日常的前端开发中，我们难免会使用到一些类似于 CSS Modules 的技术来帮助我们更好的管理样式，为此，我们推荐了一个插件 react-app-rewire-postcss-modules，该插件可以将我们的 CSS 样式与 JS 逻辑进行独立的维护，增强项目的可维护性。在本文中，将会提供详细的 npm 包 react-app-rewire-postcss-modules 的使用教程以及示例代码，让大家能够轻松上手并掌握这一工具的使用。
安装
首先需要通过 npm 安装 react-app-rewire-postcss-modules：npm install --save-dev react-app-rewire-postcss-modules。然后在 config-overrides.js 中添加以下内容：
const rewirePostcssModules = require('react-app-rewire-postcss-modules');
module.exports = function override(config, env) {
// ...
config = rewirePostcssModules(config, env);
// ...
return config;
}配置
添加 css-loader
首先需要安装 css-loader：npm install --save-dev css-loader。
然后在 config-overrides.js 中添加以下代码：
-- -------------------- ---- -------
----- ---------------- - ----------------------------------------
-------------- - -------- ---------------- ---- -
-- ---
------ - ------------------------ ---- -
----------------- -
-------- -----
---------- -----
--------------- ----------------------------------
-
---
-- ---
------ -------
-这里通过 css-loader 配置了 modules，开启了 CSS Modules 的功能，可以使得每个 CSS 类名都变为一个唯一的哈希值。但同时也降低了性能。为了提高开发效率，可以使用 classnames 等工具来生成 className。
添加 postcss-loader
然后需要安装 postcss-loader：npm install --save-dev postcss-loader。
-- -------------------- ---- -------
-------------- - -------- ---------------- ---- -
-- ---
------ - ---------------------------- ---- -
-------- -
----------------------------
-- ----
------------------- -----------------------------------
---
--
---
-- ---
------ -------
-该配置会将每个 class 名称自动映射为一个唯一的动态属性，在项目中被其他组件引用时也是动态创建、动态绑定的。这样做的好处在于能够保证每个组件样式的独立性，避免样式的冲突。
添加 import Styles
import styles from "./index.module.css";
在 index.module.css 文件中，我们可以添加以下内容：
-- -------------------- ---- ------- ---------- - ------ ----- -------- ----- --------------- ---- ---------------- -------------- -------- ----- - ------ - ---------- ----- - -------- - ---------- ----- -
现在，我们可以在 JSX 代码中这样使用样式：
// ...
return (
<div className={styles.container}>
<h1 className={styles.title}>{title}</h1>
<p className={styles.content}>{content}</p>
</div>
);总结
有了 npm 包 react-app-rewire-postcss-modules，能够帮助我们更好的管理样式，提高了项目的可维护性，增强了我们的开发效率。在使用 CSS Modules 的时候，记得要充分利用工具，把每个组件的样式独立维护好，避免样式的冲突。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bea81e8991b448e5a72