如何将多个 scss 文件合并编译成一个 css 文件？
在 css 开发中，经常需要将多个 scss 文件合并成一个 css 文件，以方便不同页面间共享样式。有两种方法可以实现此目的：
方法一：在 scss 文件中导入
在其中一个 scss 文件中，使用 @import 语句导入所有要编译的 scss 文件，例如：
立即学习“前端免费学习笔记（深入）”；
@import "style1.scss"; @import "style2.scss"; ...
方法二：使用构建脚本
使用构建工具（如 webpack 或 gulp）编写一个构建脚本，指定 scss 样式目录。然后，一次性编译所有 scss 文件并合并输出到一个 css 文件中，例如：
// gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
gulp.task('buildcss', () => {
gulp.src('./styles/**/*.scss')
.pipe(sass().on('error', sass.logerror))
.pipe(concat('main.css'))
.pipe(gulp.dest('./dist'));
});运行构建脚本：
gulp buildCSS
这种方法更自动化，但相对第一种方法更复杂。
