在前端开发中，CSS 部分是必不可少的一部分，而 PostCSS 是一个值得推荐的 CSS 处理器，它可以解析 CSS 并且带有插件式的架构，以便开发者可以通过插件功能扩展 PostCSS 的功能。在这里，我将介绍 @kandebr/postcss-modules，它是一款基于 PostCSS 模块化的 NPM 包，可以帮助开发者更加轻松地管理 CSS 样式。
前置知识
在阅读本文之前，你需要先掌握以下知识：
安装 @kandebr/postcss-modules
在使用 @kandebr/postcss-modules 之前，我们需要先将其安装到项目中，可以通过 npm 进行安装：
npm install --save-dev @kandebr/postcss-modules
配置 PostCSS
在安装成功之后，我们需要配置 PostCSS，并将 @kandebr/postcss-modules 加入到 plugins 中的数组中：
-- -------------------- ---- -------
-- -----------------
-------------- - -
-------- -
-- ----
-------------------------------------
------------------- -----------------------------------
--
-
--使用 @kandebr/postcss-modules
在配置好 PostCSS 之后，我们就可以使用 @kandebr/postcss-modules 了。我们可以在 CSS 文件中使用类似于 CSS 模块化的写法，如下所示：
-- -------------------- ---- ------- -- --------- -- ------ - ------ ---- - ------------ - ---------- ----- -
然后我们可以通过 require 的方式在 JavaScript 中使用这些类名：
// index.js
import styles from './style.css';
console.log(styles); // { title: 'style__title___2c8vq', description: 'style__description___wuwuj' }在执行完上述代码后，我们可以得到一个对象，其中包含了 CSS 类名与处理后的随机类名的映射关系。
最后，在 HTML 文件中使用处理后的类名即可：
<!-- index.html --> <div class="$styles.title">Hello World!</div>
完整的示例代码如下所示：
-- -------------------- ---- ------- -- --------- -- ------ - ------ ---- - ------------ - ---------- ----- -
-- -------------------- ---- ------- -- -------- ------ ------ ---- -------------- -------------------- -- - ------ ----------------------- ------------ ---------------------------- - ----- ----- - ------------------------------ ---------------------------------- --------------- - ------ -------- ---------------------------------
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
----------------------
-------
------
---- --------- ---
---- ---------------------------------- ------------
------- ------------------------
-------
-------总结
通过使用 @kandebr/postcss-modules，我们可以更加便捷地开发 CSS 模块化的代码，同时还可以避免出现全局类名冲突的问题。当然，这只是其中的一种实现方式，读者可以根据自己的需求选择合适的模块化方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc6967216659e24445f