在前端开发中，CSS 样式表的管理经常让人头疼。如果一个项目中涉及多个模块或页面，那么 CSS 就会变得越来越难以维护。这时，CSS 模块化就成为了一种不错的解决方案。
CSS 模块化是将一个大型的样式表分解成多个小块，每个小块的 CSS 样式只与特定的 HTML 元素相关，从而实现更好的可维护性和可复用性。而 css-modular-loader 就是一个帮助我们实现 CSS 模块化开发的 npm 包。
安装
安装 css-modular-loader 只需要运行以下命令：
npm install css-modular-loader --save-dev
配置
安装完成后，需要在 webpack 配置文件中进行如下配置：
-- -------------------- ---- -------
-------------- - -
-- --------
------- -
------ -
-
----- ---------
---- -
---------------
-
------- -------------
-------- -
-------- -
----- --------
--------------- ----------------------------------
--
-------------- --
---------- ---- -- -- --- -------
-
--
-------------------- -- -- ------------------
--
-------- ----- -- --- ---- ---- --- --
--
-- ----- ------ --
-
--
-- --------
--在此配置中，我们只对 src/ 目录下的 CSS 文件进行处理，添加了 css-modular-loader，并开启了 CSS 开发者工具支持（SourceMap）。
至此，我们已经可以使用 css-modular-loader 来愉快地进行 CSS 模块化开发了。
下面，我们来看一下如何在 JavaScript 中，引入已经被 css-modular-loader 处理过的 CSS 样式。
引入
在 JavaScript 中引入样式，只需要按以下方式引入即可：
import styles from './example.css';
这里，我们使用了 ES6 模块化的 import 语法，同时将 example.css 文件经过 css-modular-loader 处理后的结果，赋值给了一个对象 styles。
经过 css-modular-loader 处理以后，styles 对象中的键名（key）和键值（value）分别对应了 CSS 中的类名和样式，如下所示：
import styles from './example.css';
console.log(styles);
// { "title": "_3puztMpS5e5p5OI5EGULy9 _1LA4M-nKeKfJztIERIwGOK", "content": "_3KHKgDbYLMQ1JfbzBmcKjM _1M1mZt-EGoJAqbMLmf-xS0" }这里的 title 和 content 分别是 CSS 样式表中定义的类名。
为了方便演示，我们来创建一个 ./example.css 文件，其内容如下：
-- -------------------- ---- ------- ------ - ---------- ----- ------ ----- - -------- - ---------- ----- ------ ----- -
接下来，我们可以用经过 css-modular-loader 处理后的样式对象 styles，为 HTML 元素添加类名，从而应用样式：
-- -------------------- ---- ------- ------ ------ ---- ---------------- ----- ----- - ----------------------------- --------------- - ------- --------------------- ---------------------------------- -- ------ ----- ------- - ---------------------------- ----------------- - ----- -- - ---- --- --------------------- -------------------------------------- -- ------ --------------------------------- -----------------------------------
在上面的代码中，我们分别创建了一个 h1 和一个 p 标签，并为它们添加了样式类名。其中，styles.title 和 styles.content 分别对应了 CSS 文件中定义的 .title 和 .content 类名。
最后，将这两个元素添加到了页面的 body 中。
至此，我们完成了一份简单的 css-modular-loader 使用示例。
总结
通过本文，我们了解了从安装、配置到使用 css-modular-loader 的完整流程，以及如何在 JavaScript 中使用经过 css-modular-loader 处理过的样式表。
css-modular-loader 是一款非常实用的 npm 包，它可以让我们更加方便地进行 CSS 模块化开发，并提升了我们项目的可维护性和可复用性。希望大家都能够掌握这个工具，进一步提高自己的前端开发水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662d81e8991b448e2089