在现代的前端开发中，CSS 的预处理技术已经成为了一种必备技能。在 Sass 中，我们可以使用 @import 载入其他的 Sass 文件，但是如果我们直接将所有的 CSS 库和框架编译到一个文件中，会增加文件体积和加载时间，也很难维护。为了解决这个问题，我们需要将 CSS 库和框架编译到不同的文件中，然后再合并到一个文件中，这就是 gulp-sass-separate-vendors 这个 npm 包的作用。
1. 安装
在开始之前，您需要安装 node.js 和 gulp。安装完成之后，您可以使用以下命令安装 gulp-sass-separate-vendors：
--- - -------------------------- --
-D 选项表示这个包只是用于开发环境，不会在生产环境中使用。
2. 使用
在使用 gulp-sass-separate-vendors 之前，我们需要将我们的 CSS 库和框架放到一个文件夹中。在这个例子中，我们使用 ./css/vendors/ 作为文件夹名称。
2.1. 引入
在您的 gulpfile.js 文件中，您需要引入 gulp-sass-separate-vendors 和 gulp-sass （如果您还没有引入）：
----- ---- - ---------------- ----- ---- - --------------------- ----- ------- - --------------------------------------
2.2. 使用
在您的 gulpfile.js 文件中，您需要定义一个任务，用于将您的 CSS 库和框架编译到单独的文件中。在这个例子中，我们使用 ./css/styles.scss 作为主 Sass 文件。
-------------------- -------- -- -
------ -----------------------------
-------------
--------------------------------------
-------------------------------
---在上面的示例中，我们使用 .pipe(vendors('./css/vendors/*.scss')) 将 CSS 库和框架编译到 ./dist/css/ 目录下。您可以自己定义输出的目录和文件名。
2.3. 示例
在 ./css/vendors/ 文件夹中，我们有两个 Sass 文件：normalize.scss 和 bootstrap.scss。这两个文件包含了 Bootstrap 和 Normalize.css 库的样式。
您可以像这样在 ./css/styles.scss 文件中引入这两个文件：
------- -------------------- ------- --------------------
使用上面的 gulpfile.js 任务，编译后的 CSS 文件将包括 normalize.css 和 bootstrap.css。
3. 总结
使用 gulp-sass-separate-vendors，您可以将 CSS 库和框架编译到单独的文件中，然后再合并到一个文件中。这种方法可以减少文件体积和加载时间，也可以更好地组织和维护您的代码。希望这篇使用教程对您有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005590881e8991b448d66a2