在前端开发中，样式是非常重要的一部分。而当我们在开发过程中，需要将页面中使用到的样式提取出来，以便一些页面使用了相同样式的合并为一个文件，从而减少浏览器请求，提高页面加载速度。这时，extract-css 就成了一个非常有用的工具。
extract-css 是一个 npm 包，它可以将 HTML 中使用到的样式从代码中提取出来，并生成独立的 CSS 文件。下面是本文的详细教程。
安装 extract-css
在使用 extract-css 之前，我们需要先安装它。在命令行中输入以下命令进行安装：
npm install extract-css --save-dev
使用 extract-css
安装完成后，我们就可以使用 extract-css 了。在 HTML 页面中，需要将所有使用到的样式写在一个 style 标签中，然后在命令行中输入以下命令：
extract-css input.html output.css
这样，就会将 input.html 中使用到的样式提取出来，生成一个名为 output.css 的 CSS 文件。
如果需要提取多个 HTML 文件中的样式，可以使用 glob 模式进行匹配。例如，需要提取多个 HTML 文件中使用到的样式，可以在命令行中输入以下命令：
extract-css "dist/**/*.html" dist/css/
这样，就会将 dist 目录下所有以 .html 结尾的文件中使用到的样式提取出来，生成一个名为 css 的目录，并将提取出来的 CSS 文件放到 css 目录中。（需要注意的是，如果 css 目录不存在，则会自动创建。）
示例代码
下面是一个示例代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----------------- ------- ---- - ------- -- -------- -- ---------- ----- ------ ----- - --- --- --- --- --- -- - ------- -- -------- -- - ------- - ------- ----- ----------------- -------- -------------- --- ----- ----- - ---------- - ---------- ------- ------- - ----- -------- ----- - ------- - ------- ----- ----------------- -------- ----------- --- ----- ----- - -------- ------- ------ ---- --------------- ---- ------------------------------ ------ ---- ------------------ ---------- ----------- ------- -- - -------------- ------ ---- --------------- ---- ------------------------------ ------ ------- -------展开代码
我们可以将上面的代码保存为 html 文件，然后在命令行中输入以下命令：
extract-css input.html output.css
这样，就会生成一个名为 output.css 的 CSS 文件：
body{margin:0;padding:0;font-size:16px;color:#333}h1,h2,h3,h4,h5,h6{margin:0;padding:0}.header{height:80px;background-color:#f5f5f5;border-bottom:1px solid #ddd}.container{max-width:1200px;margin:0 auto;padding:20px}.footer{height:50px;background-color:#f5f5f5;border-top:1px solid #ddd}
总结
以上就是 extract-css 的使用教程。我们可以使用 extract-css 工具将 HTML 中使用到的样式提取出来，生成独立的 CSS 文件，从而提高页面加载速度。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f354f97dbf7be33b2566ec5
