不能只测 SCSS 语法，因编译合法但 CSS 行为异常（如嵌套错位、& 拼接错误、@media 折叠、!default 覆盖）会导致样式失效；需用快照测试验证 CSS 等价性，配合 matrix 枚举主题/环境变量，并通过 postcss 显式降级与 CSS 校验确保兼容性。
为什么不能只测 SCSS 文件语法？
SCSS 编译错误（如 @import 路径错、变量未定义）会在 sass 命令执行时直接报错，这类问题 CI 里用 sass --watch 或 sass src/main.scss dist/main.css 就能捕获。但更隐蔽的问题是：编译出来的 CSS 是否符合预期？比如嵌套规则生成错位、& 拼接异常、@media 查询被意外折叠、甚至因 !default 覆盖导致主题色失效——这些在语法层面完全合法，却会导致样式渲染失败。
如何验证编译产物的 CSS 行为一致性？
核心思路不是“看文件有没有生成”，而是“生成的 CSS 是否等价于已知正确快照”。推荐用快照测试（snapshot testing）配合真实编译器：
- 在 CI 中统一使用
sass@1.77.6（固定大版本，避免sass@1.78引入新解析行为） - 每次构建前运行
sass --style=expanded --no-source-map src/ > dist/output.css，强制输出标准格式（避免压缩/缩进差异干扰比对） - 用
jest+jest-snapshot对dist/output.css做快照断言：expect(cssContent).toMatchInlineSnapshot() - 首次运行会生成
__snapshots__/，后续 PR 中若 CSS 输出变更，CI 直接失败并提示「快照不匹配」，需人工确认是否为预期变更
如何覆盖多主题/多环境下的 SCSS 编译？
很多项目通过 $theme: 'dark' 这类变量控制主题，但 CI 默认只跑一次编译，无法发现 dark 模式下某条 @if 分支漏写 color 属性的问题：
- 在 GitHub Actions 的
matrix中枚举变量组合：strategy: { matrix: { theme: ['light', 'dark'], density: ['comfortable', 'compact'] } } - 每个 job 启动前注入对应变量：
run: sass --load-path=node_modules --sass-variables='{"theme": "${{ matrix.theme }}", "density": "${{ matrix.density }}"}' src/main.scss dist/main.${{ matrix.theme }}.${{ matrix.density }}.css - 为每个组合单独生成快照，确保所有分支路径都被验证
容易忽略的兼容性陷阱
SCSS 编译产物的兼容性不只取决于 Sass 版本，还受目标浏览器影响。比如 color-mix() 在 SCSS 里能编译成功，但若项目仍需支持 Chrome 110 以下，产出的 CSS 就不可用：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖本地开发机的
postcss配置，CI 中必须显式运行postcss dist/*.css --config ./postcss.config.cjs --replace -
postcss.config.cjs里targets必须和项目实际支持列表一致（如{ chrome: '110', edge: '110' }），否则 autoprefixer 不会降级color-mix - 建议在 CI 最后一步加校验：
npx css-validator --output=json dist/*.css | grep -q '"error":0'，失败则中断发布
