Gulp适合纯静态项目，Webpack必需于JS模块化场景。Gulp用插件链处理CSS预编译、加前缀、压缩、哈希；Webpack通过css-loader解析依赖，style-loader开发注入，mini-css-extract-plugin生产提取CSS。
为什么不能直接在 HTML 里写 link 引入 CSS？
手动维护样式文件路径、版本号、压缩状态，很快就会失控。比如改了 main.css，忘了更新 main.min.css；或者加了新变量，但没重新编译 Sass；又或者上线前漏掉 Autoprefixer，导致部分浏览器样式错乱。Gulp 和 Webpack 不是“锦上添花”，而是把 CSS 的生成、检查、注入、热更新变成可复现的步骤。
Gulp 处理 CSS 的典型流水线怎么搭？
适合已有项目、轻量构建、或只需要样式预处理+压缩的场景。核心是用插件链式调用，每步只做一件事：
-
gulp-sass把.scss编译成 CSS（注意：需额外装sass或node-sass，新版推荐sass） -
gulp-postcss+autoprefixer补全浏览器前缀（配置里要明确写["last 2 versions", "iOS >= 10"]，否则默认规则可能过宽） -
gulp-clean-css压缩（别用minify，它不支持@import内联） -
gulp-rev生成哈希后缀（如main-3a2b1c.css），再用gulp-rev-collector替换 HTML 中的引用
关键点：Sass 的 @import 是编译期行为，Webpack 的 import 是模块依赖，二者不能混用；Gulp 里所有路径都基于 gulp.src() 的 glob 模式，src("src/css/**/*.scss") 不会自动包含 node_modules 下的库，得手动配 includePaths。
Webpack 如何把 CSS 当模块来管？
本质是靠 css-loader 解析 @import 和 url()，再用 style-loader 注入 <style></style> 标签，开发时热更新才真正生效。但要注意：
立即学习“前端免费学习笔记（深入）”；
- 生产环境必须用
mini-css-extract-plugin替代style-loader，否则 CSS 会打到 JS 包里，无法并行加载 -
postcss-loader要放在css-loader之后、mini-css-extract-plugin之前，顺序错就白配 - 如果用了 CSS Modules，
localIdentName配置不当会导致类名过长（如Button_button__XyZ12），影响调试；建议开发用[name]_[local]_[hash:base64:5]，生产用更短的哈希
常见报错 Module build failed: TypeError: this.getOptions is not a function，基本是 css-loader 和 webpack 版本不匹配——v6+ 的 css-loader 要求 Webpack 5，降级或升级得同步。
什么时候该选 Gulp，什么时候必须上 Webpack？
如果你的项目只有静态 HTML + Sass + 图片，没有 JS 模块化需求，Gulp 更轻、启动快、出错提示直白；但只要涉及 React/Vue 组件内联样式、CSS-in-JS、主题切换（运行时换 CSS 变量）、或需要和 JS 共享设计 Token（比如从 tokens.js 生成 CSS 自定义属性），Webpack 就绕不开——它的模块图能追踪 import "./Button.module.css" 到底依赖了哪些变量、哪些断点配置、甚至哪些 SVG 内联资源。
最容易被忽略的是 source map：Gulp 默认关，Webpack 默认开但仅限开发模式；上线前若没关 devtool: "source-map"，CSS 文件体积会暴增 3–5 倍，且暴露源文件路径。
