介绍
rollup-plugin-scss 是一个用于 Rollup 的插件，能够自动将 SCSS 文件转换成 CSS 文件，并将 CSS 样式注入到 HTML 文件中。
安装
在项目根目录下执行以下命令：
npm install rollup-plugin-scss --save-dev
使用
在 Rollup 配置文件中添加以下配置
-- -------------------- ---- -------
------ ---- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
------
------- -----------------
--
-
-配置项
output: 要输出的 CSS 文件路径，默认为undefined，即不生成 CSS 文件。
示例代码
假设有如下的目录结构：
.
├── src
│ ├── index.js
│ └── style.scss
└── dist
├── bundle.js
└── index.html其中 style.scss 文件内容为：
$color: #f00;
h1 {
color: $color;
}index.js 文件内容为：
import './style.scss';
document.querySelector('h1').innerHTML = 'Hello, world!';index.html 文件内容为：
-- -------------------- ---- ------- --------- ----- ------ ------ ---------------------- ------- ------ --------- ------- ------------------------- ------- -------
然后执行 rollup -c，会生成如下的输出：
dist/bundle.js：
// 省略部分代码
var style = document.createElement("style");
style.innerHTML = "h1 {\n color: red; }\n";
document.head.appendChild(style);
document.querySelector('h1').innerHTML = 'Hello, world!';dist/bundle.css：
h1 {
color: #f00;
}可以看到，style.scss 中的变量 $color 已被转换成了实际的颜色值 #f00 并注入到了 HTML 中。
小结
rollup-plugin-scss 是一个方便的 Rollup 插件，能够自动将 SCSS 转换成 CSS 并注入到 HTML 文件中。通过本文的学习，你应该已经掌握了使用 rollup-plugin-scss 的方法和技巧，在开发过程中可以更加方便地管理样式文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/61930