简介
在前端开发中，样式表的管理一直是一个棘手的问题。以往我们面对这个问题，往往采用 CSS 模块化、CSS-in-JS 等技术，而 babel-plugin-react-css-modules 正是这一类技术的代表。它是一个 Babel 插件，可以为 React 组件中的 CSS 样式表自动生成唯一的类名，并将应用于组件。本文主要介绍该 npm 包的使用教程。
安装
使用 NPM 安装 babel-plugin-react-css-modules:
npm install --save-dev babel-plugin-react-css-modules
安装后在项目的 .babelrc 文件中添加如下配置：
-- -------------------- ---- ------- - ---------- ------- --------- ---------- - --------------------- - ------------ - -------- - --------- --------------- ----------------- ---------------- - -- --------------------- ----------------------------------- -- - -展开代码
上述配置有两个选项需要注意，分别是 filetypes 和 generateScopedName。
filetypes
在 filetypes 中，我们可以指定要被转换的样式表类型，并且可以提供样式表的语法，以使 babel-plugin-react-css-modules 可以正确地解析文件中的 CSS 语法。上述配置中，我们使用了 PostCSS 的 SCSS 语法。
generateScopedName
generateScopedName 是样式表生成的类名的格式化选项。将样式表中使用的类名和文件名组合起来生成唯一的类名，用以避免全局的样式表冲突。在本例中，生成的名称如下：
[filename]__[className]__[hash]
使用
使用 babel-plugin-react-css-modules，只需将组件文件中的样式表文件后缀由 .css 改为 .css.module.css。例如：
-- -------------------- ---- ------- ------ ------ ---- -------------------- -------- --------------- - ------ - ---- ----------------------- -- --------------------------- ---- -------- ------ -- - ------ ------- --------------展开代码
这里的样式表文件名 some.module.css 中的 module 是固定的格式，babel-plugin-react-css-modules 会根据这个文件名识别出该样式表应该使用局部作用域。
在运行时，babel-plugin-react-css-modules 会将样式表最终转换成一个对象并加入到组件的作用域中。在组件体内，使用 {styles.className} 表示该类名，它会在使用时自动生成一个唯一的类名并应用于组件中。
示例
下面的代码展示了如何使用 babel-plugin-react-css-modules，它实现的是一个在组件内使用局部样式的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ ------ ---- ---------------------- -------- -------- - ------ - ------- ---------------------------- ----- --- --------- -- -展开代码
其中，styles 可用的类名如下：
-- -------------------- ---- ------- --------- - ----------------- ---------- ------- ----- ------ ------ -------- --- ----- ----------- ------- ---------------- ----- -------- ------------- ---------- ----- -------------- ---- ----------- --- ---- ------------ - --------------- - ----------------- ----- ------ ------ ------- -------- -展开代码
总结
CSS 作为前端开发中样式表的基石，如何管理样式一直是一个棘手的问题。本文介绍了 babel-plugin-react-css-modules，一种将 CSS 模块化到 React 中的技术。通过将样式表文件后缀从 .css 改为 .css.module.css，可以应用 babel-plugin-react-css-modules，享受到自动生成唯一的 CSS 类名的便利，避免全局的样式污染。这种技术在前端开发中具有广泛的应用，学习此技术将不仅仅能增加代码的清晰度和整洁度，还能为提升开发效率提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65975
