1. 什么是 rollup-plugin-sass？
rollup-plugin-sass 是一款可以将 Sass 文件编译成 CSS 文件并且与 Rollup 一起使用的插件。使用该插件能够让 Web 开发者更加便捷地实现 CSS 模块化管理。
2. 安装和配置
2.1 安装
需要先安装 Rollup，然后才能安装和使用 rollup-plugin-sass。在安装之前，请确保已经正确安装了 Node.js 环境，然后在命令行输入以下命令安装 Rollup：
npm install rollup -g
接着，使用以下命令进行 rollup-plugin-sass 安装：
npm install rollup-plugin-sass
2.2 配置
在 Rollup 配置文件中添加以下内容：
-- -------------------- ---- -------
------ ---- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
------
------- -----------------
--
-
--这里 output 配置项指定编译生成的 CSS 文件名和路径，可以根据实际情况进行修改。
3. 示例代码
3.1 基础示例
下面是一个使用 rollup-plugin-sass 处理 Sass 文件的基础示例：
// src/index.js
import './style.scss';
console.log('Hello Rollup with Sass!');// src/style.scss
$font-size: 14px;
$line-height: 1.4;
body {
font-size: $font-size;
line-height: $line-height;
}在命令行中使用以下命令运行 rollup：
rollup -c rollup.config.js
编译生成的 CSS 文件 bundle.css 如下：
body {
font-size: 14px;
line-height: 1.4;
}3.2 样式表抽离示例
如果需要将样式表抽离出来成为一个独立的 CSS 文件，在 Rollup 配置文件中可以这样配置：
-- -------------------- ---- -------
------ ---- ---- ---------------------
------ ------- -
------ ---------------
------- -
----- -----------------
------- -----
--
-------- -
------
------- ----
--
-
--这里将 output 配置项的值设为 true，表示在打包过程中将样式表单独抽离出来生成一个 CSS 文件。然后在 HTML 页面中引入该 CSS 文件即可。
4. 结语
rollup-plugin-sass 是一个实用的插件，能够帮助 Web 开发者更加便捷地处理 Sass 文件。相信学习本文之后，你已经掌握了该插件的基本使用方法，并且能够在实际项目中灵活使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/62325