在前端开发中，样式表的管理一直是个棘手的问题。传统的样式表编写往往会让 CSS 文件变得庞大且难以维护。因此，使用 CSS 模块化的方式来编写样式表已成为一种流行趋势。而 @modular-css/processor 就是为此而生的。本文将详细介绍如何使用这个 npm 包来实现 CSS 模块化。
安装
首先，我们需要使用 npm 来安装 @modular-css/processor：
npm install @modular-css/processor
安装完成后，我们可以在项目的 node_modules/.bin 目录下找到 modular-css 的可执行文件。
使用
基本用法
在使用 @modular-css/processor 时，你首先需要为你的模块创建一个 CSS 文件，并在文件中定义名称。例如，我们分别在 foo.css 和 bar.css 中定义了两个模块 foo 和 bar：
-- -------------------- ---- ------- -- ------- -- ---- - ------ ---- - -- ------- -- ---- - ------ ----- -
接着，我们可以使用 modular-css 命令来将这些 CSS 文件进行处理并生成相应的 CSS 模块。
./node_modules/.bin/modular-css foo.css bar.css --css foo-and-bar.css
这个命令指定了两个输入文件 foo.css 和 bar.css，并将处理后的输出文件保存为 foo-and-bar.css。如果一切顺利，你应该可以在 foo-and-bar.css 文件中看到以下内容：
-- -------------------- ---- ------- -- --- -- ---- - ---------- - -- --- -- ---- - ----------- -
进阶用法
在 @modular-css/processor 中，我们还可以使用其他的参数来定制化我们的处理流程。这些参数包括：
--map：是否生成 CSS sourcemap。--json：是否生成模块与 CSS 映射(JSON 文件)。--css：处理后的输出文件名。--sass：处理 Sass 格式的文件。--less：处理 Less 格式的文件。--stylus：处理 stylus 格式的文件。-I,--import：向 CSS 添加自定义引入语句。--vars：传入自定义变量。--namedExports：生成命名导出的 CSS 模块。
下面我们来看一个稍微复杂一些的例子。假设我们有一个 main.css 文件，这个文件中引入了许多其他的 CSS 模块文件。我们希望将这些文件进行合并，并且生成相应的 JSON 与 sourcemap 文件。命令如下所示：
./node_modules/.bin/modular-css main.css --css main.min.css --json main.json --map
这个命令将 main.css 中引用的所有 CSS 模块文件进行处理，并将处理后的 CSS 打包为一个名为 main.min.css 的文件，同时生成一个名为 main.json 的文件，其中包含各个模块与 CSS 的映射关系。如果你需要，可以通过其他工具来将 JSON 文件转化为其他格式，例如 Sass 或 Less。
结语
在本文中，我们详细介绍了 @modular-css/processor 的基础用法以及进阶用法，希望对你有所帮助。在实际开发过程中，使用 CSS 模块化的方式编写 CSS 样式表，可以大大减少文件的大小并提升样式表维护的效率。如果你从事前端开发工作，不妨尝试一下使用 @modular-css/processor 这个 npm 包来实现 CSS 模块化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3fd5bbdbf7be33b25671d2
