如何将多个 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
这种方法更自动化，但相对第一种方法更复杂。