介绍
rollup-plugin-scss 是一个用于 Rollup 的插件,能够自动将 SCSS 文件转换成 CSS 文件,并将 CSS 样式注入到 HTML 文件中。
安装
在项目根目录下执行以下命令:
--- ------- ------------------ ----------
使用
在 Rollup 配置文件中添加以下配置
------ ---- ---- --------------------- ------ ------- - ------ --------------- ------- - ----- ----------------- ------- ----- -- -------- - ------ ------- ----------------- -- - -
配置项
output
: 要输出的 CSS 文件路径,默认为undefined
,即不生成 CSS 文件。
示例代码
假设有如下的目录结构:
- --- --- - --- -------- - --- ---------- --- ---- --- --------- --- ----------
其中 style.scss
文件内容为:
------- ----- -- - ------ ------- -
index.js
文件内容为:
------ --------------- -------------------------------------- - ------- --------
index.html
文件内容为:
--------- ----- ------ ------ ---------------------- ------- ------ --------- ------- ------------------------- ------- -------
然后执行 rollup -c
,会生成如下的输出:
dist/bundle.js
:
-- ------ --- ----- - -------------------------------- --------------- - --- --- ------ ---- ----- --------------------------------- -------------------------------------- - ------- --------
dist/bundle.css
:
-- - ------ ----- -
可以看到,style.scss
中的变量 $color
已被转换成了实际的颜色值 #f00
并注入到了 HTML 中。
小结
rollup-plugin-scss 是一个方便的 Rollup 插件,能够自动将 SCSS 转换成 CSS 并注入到 HTML 文件中。通过本文的学习,你应该已经掌握了使用 rollup-plugin-scss 的方法和技巧,在开发过程中可以更加方便地管理样式文件。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/61930