简介
postcss-inject 是一个基于 PostCSS 的工具，它可以自动将指定的 CSS 代码注入到页面中，通常用于实现样式共享和视觉元素的复用。
安装
你可以通过 npm 来安装 postcss-inject，使用以下命令：
npm install postcss-inject --save-dev
使用
在使用 postcss-inject 之前，你需要先配置好 PostCSS。这里我们假设已经完成了 PostCSS 的配置，下面就介绍如何使用 postcss-inject。
首先，在需要注入 CSS 代码的文件中，添加以下注释：
/* postcss-inject: src/path/to/styles.css */
其中，src/path/to/styles.css 表示要注入的 CSS 代码所在的文件地址。你可以使用相对路径或者绝对路径来指定该文件。
接着，在 PostCSS 的配置文件中，使用 postcss-inject 插件：
-- -------------------- ---- -------
----- ------------- - --------------------------
-------------- - -
-------- -
---------------
----- --------------------------
--
-
--其中，path 表示要注入的 CSS 代码所在的文件列表，你可以传入一个数组来指定多个文件。
最后，运行 PostCSS 命令，即可将指定的 CSS 代码注入到页面中。
示例
假设你在项目中有一个样式文件 src/common.css，你希望将该样式文件的样式以及其他辅助样式都注入到所有页面中。
首先，在需要注入 CSS 代码的文件中添加注释：
/* postcss-inject: src/common.css */
然后，在 PostCSS 的配置文件中添加 postcss-inject 插件：
-- -------------------- ---- -------
----- ------------- - --------------------------
-------------- - -
-------- -
---------------
----- ------------------
--
-
--最后，运行 PostCSS 命令，即可将 src/common.css 中的样式注入到所有页面中。
总结
使用 postcss-inject，你可以轻松地将 CSS 代码注入到页面中，实现样式共享和视觉元素的复用。同时，本文也介绍了 postcss-inject 的安装和使用方法，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66751