摘要
本文将介绍 npm 包 @umijs/babel-plugin-auto-css-modules，这是一个在 UmiJS 框架中使用的插件，可以自动为 css 文件生成相应的 module，同时使项目更易于维护。
简介
UmiJS 是一个可插拔的企业级前端应用框架，它基于路由约定、插件机制和 webpack 打包，可以轻松构建复杂的单页和多页应用。而 @umijs/babel-plugin-auto-css-modules 是这个框架中的一个插件，它能够自动化处理 CSS Modules。
CSS Modules 是一种 CSS 的模块化方案，它使得 CSS 文件可以被当做模块来使用，避免全局污染，增加代码复用性。在使用 CSS Modules 的时候，每一个 CSS class 都是独立的，只在 local scope 中有效，所以不会产生样式冲突的问题。
安装
使用 npm 或者 yarn 安装@umijs/babel-plugin-auto-css-modules：
npm install @umijs/babel-plugin-auto-css-modules --save-dev
配置
在项目的 .umirc.js 或者 config/config.js 中添加配置：
{
plugins: ['@umijs/babel-plugin-auto-css-modules'],
}这个插件会将以下类型的文件自动转换成 CSS Modules：
- 以 .module.css 结尾的文件
- 在 import 语句中带有 .module.css 的文件
例如：
import styles from './index.module.css';
会被转换成：
import styles from './index.module.css?modules';
使用
在项目中使用 CSS Modules 和普通的 CSS 没有太大的区别，只需要在类名前面加上样式名称即可。例如：
-- -------------------- ---- ------- -- ---------------- -- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ----- - ------ - ---------- ----- ------------ ----- -
在 JavaScript 文件中使用这个 CSS：
-- -------------------- ---- -------
------ ------ ---- ---------------------
-------- ----- -
------ -
---- -----------------------------
---- ------------------------------ ------------
------
--
-
------ ------- ----这样，在编译后就会生成相应的 module。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- ------- -- ---------------- -- ---------- - -------- ----- ---------------- ------- ------------ ------- ------- ----- - ------ - ---------- ----- ------------ ----- -
-- -------------------- ---- -------
-- ---------
------ ------ ---- ---------------------
-------- ----- -
------ -
---- -----------------------------
---- ------------------------------ ------------
------
--
-
------ ------- ----总结
使用@umijs/babel-plugin-auto-css-modules 可以帮助我们更加方便快捷地使用 CSS Modules，从而减少全局样式的污染，提高代码的可维护性。同时，这个插件的安装和配置相对简单，在 UmiJS 中默认就已经加入，更加方便了我们的项目开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb53bb5cbfe1ea06113f4