在前端开发中，样式表的引入是一个必不可少的环节。但是，在一些场景下，我们需要将 CSS 样式直接添加到 HTML 标签的 style 属性中，这时候我们可以使用 npm 包 dir-css-inliner。
什么是 dir-css-inliner？
dir-css-inliner 是一个 npm 包，其主要作用是将一个包含 CSS 样式的 HTML 文件中的所有 CSS 样式都直接添加到 HTML 标签的 style 属性中，方便进行单个文件的打包、转移等操作。
如何使用 dir-css-inliner？
安装
使用 npm 包管理工具，在终端中输入以下命令，即可安装 dir-css-inliner：
npm install dir-css-inliner -g
基本使用
在终端中输入以下命令，即可使用 dir-css-inliner：
dir-css-inliner -i input.html -o output.html
-i：指定输入的 HTML 文件路径。-o：指定输出路径和文件名。
高级使用
dir-css-inliner 还支持一些高级选项。
-p：指定一个 HTML 元素的 CSS 属性名，仅会将该元素的 CSS 样式添加到style属性中。例如，以下命令只将 ID 为test-element的元素的 CSS 样式添加到style属性中：
dir-css-inliner -i input.html -o output.html -p '#test-element'
-n：指定一个 CSS 类，仅会将该类名对应的 CSS 样式添加到style属性中。例如，以下命令只将类名为test-class的元素的 CSS 样式添加到style属性中：
dir-css-inliner -i input.html -o output.html -n 'test-class'
示例代码
以下代码演示了如何使用 dir-css-inliner：
-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
---------------------- ---------------
-------
-------- -
------ ----
---------- -----
-
------------- -
----------- -----
------- --- ----- ------
-
--------
-------
------
---- ---------------------- ----------------------
---- ---------------------- -------------
-------
-------dir-css-inliner -i input.html -o output.html
-- -------------------- ---- ------- ---- ----------- --- --------- ----- ------ ------ ----- ---------------- ---------------------- --------------- ------- ------ ---- --------------- ------------- ---- ---------- ------------- ---------------------- ---- ----------------- ------------------ ----- ------- --- ----- ------------ ------------- ------- -------
总结
使用 dir-css-inliner 可以方便地将一个包含 CSS 样式的 HTML 文件中的所有 CSS 样式都直接添加到 HTML 标签的 style 属性中，方便进行单个文件的打包、转移等操作。在具体使用中，可以根据实际情况使用不同的选项以达到更好的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d030d092702382297f