tlvince-rollup-plugin-css-only 是一个可以将 CSS 文件转换为 JavaScript 模块的 Rollup 插件，使得前端开发者可以更加方便地在 JavaScript 中引入和处理 CSS 样式。
安装
--- ------- ------------------------------ ----------
使用方法
在 Rollup 配置文件中添加以下代码：
------ --- ---- -------------------------
------ ------- -
------ ------- -------
-------- -
----- ------- -------- ---------- --
-
--其中，<entry file> 是入口文件路径，<bundle file> 是生成的 CSS 文件路径。
指导意义
tlvince-rollup-plugin-css-only 不仅可以将 CSS 文件转换为 JavaScript 模块，还支持以下功能：
1. Sass 的预处理
在 Rollup 配置文件中添加如下代码即可完成 Sass 的预处理：
------ ---- ---- ------------
------ --- ---- -------------------------
------ ------- -
------ ------- -------
-------- -
-----
------- -------- -----------
----- --------------- -- -- --------- -----
--
-
--2. CSS Modules 模块化
在 Rollup 配置文件中添加如下代码即可开启 CSS Modules 模块化：
------ --- ---- -------------------------
------ ------- -
------ ------- -------
-------- -
-----
------- -------- -----------
-------- ---- -- -- --- ------- ---
--
-
--3. 自定义 CSS 选择器
在 Rollup 配置文件中添加如下代码即可自定义 CSS 选择器，例如添加前缀：
------ --- ---- -------------------------
------ ------- -
------ ------- -------
-------- -
-----
------- -------- -----------
--------- ------------------------- -- --- --- ---
--
-
--4. 嵌入字体文件
在 CSS 文件中嵌入字体文件，只需在 Rollup 配置文件中添加如下代码，同时在 CSS 文件中引入字体：
------ --- ---- -------------------------
------ ------- -
------ ------- -------
-------- -
-----
------- -------- -----------
------ ------ ------ -- ------
--
-
--示例代码
------ --- ---- -------------------------
------ ------- -
------ --------------- -- ----
------- -
----- ----------------- -- ----
------- -----
--
-------- -
-----
------- ------------------ -- -- --- --
-------- ----- -- -- --- ------- ---
--------- -------------------------- -- --- --- ---
--
-
--来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671981e8991b448e36ed