介绍
前端工程师们经常需要使用各种 CSS 预处理器来编写样式表，如 SASS、Less、Stylus 等等。这些预处理器都能把代码中的变量、函数和 mixin 转换成原生 CSS 代码，但是多数预处理器的编译需要手动运行 CLI 命令，这给开发带来了不必要的麻烦。
@n3dst4/build-stylesheets 是一个通过使用 rollup 和 postcss 将 CSS 预处理器转换为原始 CSS 的工具。当你编写样式表时，可以使用任意的 CSS 预处理器，然后在最终构建前运行 npm run build 命令即可，非常方便。
安装
@n3dst4/build-stylesheets 需要 Node.js 8 或更高版本的运行环境才能正常使用。使用 npm 安装此包，可以在控制台执行命令：
npm install @n3dst4/build-stylesheets --save-dev
使用
新增文件
首先，需要在项目中创建一个新的 CSS 文件，比如 style.sass。这个样式表可以使用任何被支持的 CSS 预处理器编写。
修改 package.json
然后，需要在 package.json 配置文件中设置一些参数。在 "scripts" 部分，添加以下内容：
{ "scripts": { "build": "build-stylesheets" } }
这个命令将自动打开 @n3dst4/build-stylesheets，并编译所有的 CSS 文件。
配置文件
现在，需要创建一个 rollup.config.js 文件，在其中编写如下内容：
-- -------------------- ---- ------- ------ ---------------- ---- --------------------------- ------ ------- - ------ ------------------- ------- - ----- ---------------------- -- -------- - ------------------ ------------- ------------------ -- - -展开代码
此配置可以在编译时从 src 目录编译出一个 index.scss 文件，并将其输出到 dist/css 目录中。includePaths 参数可以告诉预处理器在哪里寻找依赖，可以为数组，支持多个路径配置。
编译
最后，在项目根目录下运行：
npm run build即可编译所有的 CSS 文件。
示例代码
这里提供了一些在 Sass 中使用变量、嵌套和 mixin 的示例代码。
style.sass 文件：
-- -------------------- ---- ------- ------- ---------------- ------- ------------- ---- ------------ ------------ ------ -------------- -- -------- -----------展开代码
variables.sass 文件：
$primary-color: #000 $font-family: Arial, sans-serif
mixins.sass 文件：
@mixin title-style font-size: 24px font-weight: bold
经过 @n3dst4/build-stylesheets 编译后的输出代码：
body { font-family: Arial, sans-serif; color: #000; } h1 { font-size: 24px; font-weight: bold; }
总结
使用 @n3dst4/build-stylesheets，前端工程师无需手动运行 CLI 命令即可将 CSS 预处理器转换为原生 CSS 代码，大大简化了开发过程。此工具还支持多个路径配置，可以自由切换编译时的文件路径。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/158601
