Gulp适合纯CSS或老项目，配置简单启动快；Webpack适合现代前端项目，需style-loader+css-loader+sass-loader配合，注意Dart Sass替代node-sass、loader顺序、sourceMap及下划线文件监听问题。
用 Gulp 还是 Webpack 编译 Sass？先看你的项目规模
Gulp 更适合纯 CSS 工程或老项目轻量接入，它把 sass 当作一个输入→输出的转换步骤，配置直观、启动快；Webpack 则更适合现代前端项目（比如带 React/Vue、需要按需加载 CSS、要走 CSS-in-JS 或模块化样式），但它默认不处理 Sass，得靠 style-loader + css-loader + sass-loader 三层链式配合，稍一配错就报 Module parse failed: Unexpected character '@'。
- 小型静态站、文档页、营销页 → 选 Gulp，
gulp-sass一行命令搞定编译+监听 - 中大型应用、已有 Webpack 构建流程 → 别硬塞 Gulp，直接在
webpack.config.js的module.rules里加 Sass 规则 - 如果你用的是 Webpack 5+，注意
node-sass已停止维护，改用sass（Dart Sass）包，否则会遇到Cannot find module 'node-sass'
Gulp 编译 Sass 的最小可靠配置
核心是别漏掉 dart-sass 作为 gulp-sass 的编译引擎——新版 gulp-sass 不再自带编译器，装错会报 Error: Cannot find module 'sass'。
const sass = require('gulp-sass')(require('sass'));
const gulp = require('gulp');
<p>gulp.task('sass', () => {
return gulp.src('./src/scss/*<em>/</em>.scss')
.pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
.pipe(gulp.dest('./dist/css'));
});</p><p>gulp.watch('./src/scss/*<em>/</em>.scss', gulp.series('sass'));</p>- 必须显式传入
require('sass')，不能只写require('gulp-sass') -
outputStyle推荐用'expanded'（开发）或'compressed'（生产），'nested'在 watch 下容易触发重复编译 - 错误没加
.on('error', sass.logError)，出错时任务直接中断，watch 停摆
Webpack 中 Sass 加载链常见断点
最常卡在 loader 执行顺序和 sourceMap 冲突上：loader 是从右往左执行的，sass-loader → css-loader → style-loader 这个顺序不能颠倒；而如果启用了 devtool: 'source-map'，又没给 css-loader 配 sourceMap: true，就会出现样式能生效但断点定位不到 SCSS 行号的问题。
立即学习“前端免费学习笔记（深入）”；
- 确保
sass-loader版本与sass匹配（v12+ 对应 Dart Sass v1.3+） -
css-loader必须开启sourceMap: true，否则 HMR 更新后样式丢失 -
style-loader在开发环境够用，但构建生产包时得换成mini-css-extract-plugin，否则 CSS 会打进 JS bundle 里，无法并行加载 - 如果引入了
@import url(...)或字体路径，url()默认不解析相对路径，需在css-loader中设url: true
为什么改了 _variables.scss 却没热更新？
Gulp 的 gulp.watch 默认只监听你写的 glob 路径，像 ./src/scss/*<em>/</em>.scss 会漏掉下划线前缀的局部文件（如 _mixins.scss），因为 Node.js 的 glob 默认不匹配隐藏/下划线文件。
- Gulp：把 watch 路径改成
./src/scss/*<em>/</em>.{scss,sass}，或显式加上./src/scss/*<em>/_</em>.scss - Webpack：检查
sass-loader的additionalData或implementation是否干扰了依赖追踪；更稳妥的是在入口 SCSS 文件顶部统一用@use或@import显式声明依赖，避免隐式引用导致 watcher 失效 - 另一个隐形坑：
sass编译时对@import的路径解析是基于工作目录的，不是相对于当前文件——所以@import '../base/reset'在不同层级可能失效，建议统一用@use+loadPaths配置
CSS 自动化最麻烦的从来不是跑起来，而是让所有 import、sourceMap、watch 和 HMR 在同一套路径逻辑下稳定共存。路径别混用相对/绝对，loader 别跨版本拼凑，下划线文件别指望 glob 自动兜底。
