在开发前端项目时,对于样式的管理一直是一个头痛的问题。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 项目中已经安装了以下依赖:
---- --- ----------------- ------------- --
或者
--- ------- ----------------- ------------- ----------
安装完以上依赖后,我们来安装 meetyou-react-app-rewire-css-modules
---- --- ------------------------------------ --
或者
--- ------- ------------------------------------ ----------
接下来我们来详细了解如何在 Create React App 中使用 meetyou-react-app-rewire-css-modules
配置 meetyou-react-app-rewire-css-modules
- 修改
package.json
在 package.json
中,将 react-scripts
替换成 react-app-rewired
,修改后如下所示。
---------- - - -------- -------------- ------- - -------- -------------- ------- - ------- -------------- ------ - -------- ------------------ ------- - -------- ------------------ ------- - ------- ------------------ ------ -
- 添加
config-overrides.js
文件
在项目根目录下新建 config-overrides.js
文件,输入以下内容。
----- ---------------- - ------------------------------------------------ -------------- - -------- ---------------- ---- - ------ - ------------------------ ----- ------ ------- --
这里的 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
文件的内容如下所示。
------------ - ----------------- -------- ------------- -------- - ------------------ - ----------------- -------- ------------- -------- -
后面的部分,在我们的项目代码中,我们想要这样引用样式:
------ ------ ---- --------------------- -------- -------- - ------ - ------- ---------------------------------- ----- --- --------- - -
这样,你就可以使用 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
的文件的内容如下所示。
---- - ----------------- -------- ---------- ----- -
接下来,你可以为需要局部化的 CSS 文件指定后缀名 .module.css
,这些样式将仅在当前组件及其子组件中可用。
----- - ------ ----- -
你在代码中引用时只需加上后缀名即可。
------ ------ ---- ---------------------- ------ ------------ ---- ---------------------- -------- -------- - ------ - -- ------- ---------------------------------- ----- --- --------- ---- ------------------------------------- ----------- -- ------ --------- --- -- -
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