在开发前端项目时，对于样式的管理一直是一个头痛的问题。CSS Modules 是一种解决方案，它将样式表局部化，防止样式冲突，提高代码复用性。在 Create React App 中使用 CSS Modules 也非常简单，只需要在文件名后缀中添加 .module.css，即可实现自动开启 CSS Modules，但是其局限性也比较明显，在应用场景上是有所局限的。
在这里，我要介绍一款 NPM 包，它能够帮助我们更方便地对 Create React App 中的 CSS Modules 进行配置和使用，那就是 meetyou-react-app-rewire-css-modules。
meetyou-react-app-rewire-css-modules 基础
meetyou-react-app-rewire-css-modules 是一款基于 react-app-rewired 的插件，它是一款 Create React App 的自定义配置工具，可以帮助我们更方便地对 Create React App 进行配置和扩展。在使用之前，你需要先确保你的 Create React App 项目中已经安装了以下依赖：
yarn add react-app-rewired customize-cra -D
或者
npm install react-app-rewired customize-cra --save-dev
安装完以上依赖后，我们来安装 meetyou-react-app-rewire-css-modules
yarn add meetyou-react-app-rewire-css-modules -D
或者
npm install meetyou-react-app-rewire-css-modules --save-dev
接下来我们来详细了解如何在 Create React App 中使用 meetyou-react-app-rewire-css-modules
配置 meetyou-react-app-rewire-css-modules
- 修改
package.json
在 package.json 中，将 react-scripts 替换成 react-app-rewired，修改后如下所示。
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test",
}- 添加
config-overrides.js文件
在项目根目录下新建 config-overrides.js 文件，输入以下内容。
const rewireCssModules = require('meetyou-react-app-rewire-css-modules');
module.exports = function override(config, env) {
config = rewireCssModules(config, env);
return config;
};这里的 config 和 env 分别是 Create React App 的配置和环境变量，meetyou-react-app-rewire-css-modules 将使用这两个参数对 CSS Modules 进行配置和初始化。
使用 meetyou-react-app-rewire-css-modules
在你创建的 CSS 文件中，你可以使用 CSS Modules。例如，一个 button.module.css 文件的内容如下所示。
.btn-primary {
background-color: #007bff;
border-color: #007bff;
}
.btn-primary:hover {
background-color: #0069d9;
border-color: #0062cc;
}后面的部分，在我们的项目代码中，我们想要这样引用样式：
-- -------------------- ---- -------
------ ------ ---- ---------------------
-------- -------- -
------ -
------- ----------------------------------
----- ---
---------
-
-这样，你就可以使用 CSS Modules 来管理你的样式了。
深度学习
meetyou-react-app-rewire-css-modules 提供了一些自定义配置选项，如果你使用 Create React App 中的 LESS 和 SASS 预处理器，可以使用以下配置。
-- -------------------- ---- -------
----- ---------------- - ------------------------------------------------
----- - ------------- - - -------------------------
----- - ------------- - - -------------------------
-------------- - -------- ---------------- ---- -
------ - ------------------------ -----
------ - ---------------
------------------ -----
---------- -----
------ - ---------------
------------------ -----
---------- -----
------ -------
--这个配置允许你使用 LESS 或 SASS 预处理器，并添加了 javascriptEnabled: true 配置项，这允许在 SASS 或 LESS 中使用 JavaScript。
常见问题
Q: 如果我想同时使用 CSS Modules 和普通 CSS，该怎么办？
A: 为普通 CSS 添加 global 标志。
-- -------------------- ---- -------
------ --------------- -- ------ ---
------ ------ ---- ---------------------- -- --- -------
-------- -------- -
------ -
--
------- ----------------------------------
----- ---
---------
---- --------------------- -- ------ ---------
---
--
-Q: 我想要一些样式在全局可用，但其他样式只在组件中可用，该怎么办？
A: 这时你可以为全局样式文件添加 .global 后缀，以示区分。例如，一个 styles.global.css 的文件的内容如下所示。
body {
background-color: #f5f5f5;
font-size: 16px;
}接下来，你可以为需要局部化的 CSS 文件指定后缀名 .module.css，这些样式将仅在当前组件及其子组件中可用。
.test {
color: #333;
}你在代码中引用时只需加上后缀名即可。
-- -------------------- ---- -------
------ ------ ---- ----------------------
------ ------------ ---- ----------------------
-------- -------- -
------ -
--
------- ----------------------------------
----- ---
---------
---- ------------------------------------- ----------- -- ------ ---------
---
--
-Q: 非 CSS Modules 文件怎么引入？
A: 我们可以通过在 css-loader 中添加 modules 配置来控制 CSS 文件的处理。例如，在使用 LESS 或 SASS 预处理器时，你可以使用以下配置。
-- -------------------- ---- -------
----- ---------------- - ------------------------------------------------
----- - ------------- - - -------------------------
----- - ------------- - - -------------------------
-------------- - -------- ---------------- ---- -
------ - ------------------------ -----
--------------------------
----- ----------------------
-------- ------------------------------
---- -
---------------
-------------
-----------------
- ------- -------------- -------- - ------------------ ---- - --
- ------- -------------- -------- - ------------------ ---- - -
-
---
------ - ---------------
------------------ -----
---------- -----
------ - ---------------
------------------ -----
---------- -----
------ -------
--在这个配置中，我们添加了对 .less、.sass 和 .scss 文件的处理规则，其中 exclude 配置项指排除已经添加了 .module 标志的文件。这就是我们应对非 CSS Modules 文件的一种方法。
结语
通过简单的配置，我们就可以使用 meetyou-react-app-rewire-css-modules 非常方便地管理项目中的 CSS 工作。希望这篇文章能够帮助到大家，让我们能够更好地管理和处理样式文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cda81e8991b448e683e