简介
@babel-plugins/umi-css-modules 是一个 babel 插件，用于在 umi 中优化 css-modules，提高 css 模块化的效率和开发体验。它可以将 css 文件转化为 js 模块，支持使用变量和类名，避免了重复命名和样式泄露等问题。
安装
使用 npm：
npm install --save-dev @babel-plugins/umi-css-modules
或者使用 yarn：
yarn add --dev @babel-plugins/umi-css-modules
使用方法
在 umi 的 .umirc.js 或者 config/config.js 中配置 babel 插件：
-- -------------------- ---- -------
------ ------- -
-- ---
------------------ -
-
-----------------------
-
------------ --------------
------ -----
-
--
------------------------------------------ - -------- --------- ------- ---
-
--------------------------------------
-
------------------- -----------------------------------
-
-
--
-- ---
-其中，在 extraBabelPlugins 中添加 @babel-plugin-css-modules-transform 插件，generateScopedName 是生成的 class 名称的格式，可以根据实际需要自行调整。
示例代码
-- -------------------- ---- -------
------ ------ ---- ---------------
-------------------- -- ----------- --------------------------- ------ -----------------------
------------------------------ -- ------------------------
-------- ------------- -
------ -
---- -----------------------------
--- ------------------------------- -----------
------
--
-
------ ------- ------------在组件中引入 css 文件后，使用 styles.xxx 进行类名的访问。这样做可以避免同名的冲突和污染了全局 css 的问题。而且，不需要手动设置类名，也可以实现样式的复用。
简单使用
import './index.css';
function MyComponent() {
return <div className="container">Hello, World!</div>;
}
export default MyComponent;这样做虽然简单，但是不利于模块化以及样式复用。
高级使用
import styles from './index.css';
function MyComponent() {
return <div className={styles.container}>Hello, World!</div>;
}
export default MyComponent;使用 babel 插件 @babel-plugins/umi-css-modules 转换后，可以实现 css 的模块化，防止类名冲突，并且可以使用样式变量以及样式复用。
结论
在实际的前端项目中，使用 css 模块化可以大大提高开发效率和代码的可维护性。@babel-plugins/umi-css-modules 插件是一个不错的选择，可以快速实现 css 模块化，并且可以支持样式变量和样式复用。需要注意的是，推荐使用 umi 这样的前端框架，能够更好的支持配置 css, less 等文件的预处理器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/105937