介绍
前端工程师们经常需要使用各种 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 安装此包，可以在控制台执行命令：
--- ------- ------------------------- ----------
使用
新增文件
首先，需要在项目中创建一个新的 CSS 文件，比如 style.sass。这个样式表可以使用任何被支持的 CSS 预处理器编写。
修改 package.json
然后，需要在 package.json 配置文件中设置一些参数。在 "scripts" 部分，添加以下内容：
-
---------- -
-------- -------------------
-
-这个命令将自动打开 @n3dst4/build-stylesheets，并编译所有的 CSS 文件。
配置文件
现在，需要创建一个 rollup.config.js 文件，在其中编写如下内容：
------ ---------------- ---- ---------------------------
------ ------- -
------ -------------------
------- -
----- ----------------------
--
-------- -
------------------
------------- ------------------
--
-
-此配置可以在编译时从 src 目录编译出一个 index.scss 文件，并将其输出到 dist/css 目录中。includePaths 参数可以告诉预处理器在哪里寻找依赖，可以为数组，支持多个路径配置。
编译
最后，在项目根目录下运行：
--- --- -----
即可编译所有的 CSS 文件。
示例代码
这里提供了一些在 Sass 中使用变量、嵌套和 mixin 的示例代码。
style.sass 文件：
------- ---------------- ------- ------------- ---- ------------ ------------ ------ -------------- -- -------- -----------
variables.sass 文件：
--------------- ---- ------------- ------ ----------
mixins.sass 文件：
------ ----------- ---------- ---- ------------ ----
经过 @n3dst4/build-stylesheets 编译后的输出代码：
---- - ------------ ------ ----------- ------ ----- - -- - ---------- ----- ------------ ----- -
总结
使用 @n3dst4/build-stylesheets，前端工程师无需手动运行 CLI 命令即可将 CSS 预处理器转换为原生 CSS 代码，大大简化了开发过程。此工具还支持多个路径配置，可以自由切换编译时的文件路径。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/158601