在前端开发中，样式是非常重要的一部分。而当我们在开发过程中，需要将页面中使用到的样式提取出来，以便一些页面使用了相同样式的合并为一个文件，从而减少浏览器请求，提高页面加载速度。这时，extract-css 就成了一个非常有用的工具。
extract-css 是一个 npm 包，它可以将 HTML 中使用到的样式从代码中提取出来，并生成独立的 CSS 文件。下面是本文的详细教程。
安装 extract-css
在使用 extract-css 之前，我们需要先安装它。在命令行中输入以下命令进行安装：
--- ------- ----------- ----------
使用 extract-css
安装完成后，我们就可以使用 extract-css 了。在 HTML 页面中，需要将所有使用到的样式写在一个 style 标签中，然后在命令行中输入以下命令：
----------- ---------- ----------
这样，就会将 input.html 中使用到的样式提取出来，生成一个名为 output.css 的 CSS 文件。
如果需要提取多个 HTML 文件中的样式，可以使用 glob 模式进行匹配。例如，需要提取多个 HTML 文件中使用到的样式，可以在命令行中输入以下命令：
----------- ---------------- ---------
这样，就会将 dist 目录下所有以 .html 结尾的文件中使用到的样式提取出来，生成一个名为 css 的目录，并将提取出来的 CSS 文件放到 css 目录中。（需要注意的是，如果 css 目录不存在，则会自动创建。）
示例代码
下面是一个示例代码：
--------- -----
------
------
----- ----------------
-----------------
-------
---- -
------- --
-------- --
---------- -----
------ -----
-
--- --- --- --- --- -- -
------- --
-------- --
-
------- -
------- -----
----------------- --------
-------------- --- ----- -----
-
---------- -
---------- -------
------- - -----
-------- -----
-
------- -
------- -----
----------------- --------
----------- --- ----- -----
-
--------
-------
------
---- ---------------
---- ------------------------------
------
---- ------------------
---------- -----------
------- -- - --------------
------
---- ---------------
---- ------------------------------
------
-------
-------我们可以将上面的代码保存为 html 文件，然后在命令行中输入以下命令：
----------- ---------- ----------
这样，就会生成一个名为 output.css 的 CSS 文件：
----------------------------------------------------------------------------------------------------------------------------------------------------- ----- ----------------------------------------- ----------------------------------------------------------------------------- ----- -----
总结
以上就是 extract-css 的使用教程。我们可以使用 extract-css 工具将 HTML 中使用到的样式提取出来，生成独立的 CSS 文件，从而提高页面加载速度。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5f354f97dbf7be33b2566ec5