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