scss回归测试必须与真实编译环境对齐，否则快照比对必然失败；dart sass 5.0.0和5.1.0对@use模块解析顺序存在差异，导致css输出字节级不同，ci中直接触发tomatchsnapshot()报错。
SCSS 回归测试必须和真实编译环境对齐，否则快照比对必然失败——Dart Sass 5.0.0 和 5.1.0 对 @use 模块解析顺序的差异，会导致 CSS 输出字节级不同，而这种变化在 CI 中直接表现为 toMatchCssSnapshot() 报错。
用 Jest 测试 SCSS 输出时，必须 import 原始 .scss 文件
不是测编译后的 dist/main.css，而是让 Jest 在测试中直接 import 源 SCSS 文件（如 button.scss），再通过 transformer 解析 @import、@use 和变量，最终吐出纯 CSS 字符串。关键在于：测试入口是源文件，不是产物。
- 需配置
jest-transform-css或自定义 transformer，支持.scss后缀 + Dart Sass 运行时解析 - 禁止在测试里读取
fs.readFileSync('dist/button.css')——这绕过了实际编译流程，无法捕获@use路径错误或变量未定义等编译期问题 - 测试文件路径不能包含
node_modules/或dist/，否则 Sass 版本升级带来的空格/注释变动会误触发快照失败
stylelint-selector-bem-pattern 必须配全三项参数
只开插件不设参数，等于没校验。BEM 破坏往往静默发生：.card-title--large 替代 .card__title--large，CSS 仍能生效，但后续样式维护会漏改节点。
-
componentName：必须设为'lowercase'，否则.Card会被放行，破坏约定 -
style：必须设为'bem'，否则不校验双下划线结构 -
allowMultipleModifiers：必须设为false，否则.user-card__avatar--large--dark这类非法双 modifier 逃过检查
CI 中跑 stylelint 时，要排除非 SCSS 编译产物
CI 脚本里执行 npx stylelint "**/*.{css,scss,vue}" 是常见写法，但它会误扫 node_modules 下的第三方样式，或 dist/ 里已压缩的 CSS——这些文件不该由你团队的 BEM 规则约束。
- 推荐显式限定路径：
npx stylelint "src/**/*.{scss,vue}" - Vue 单文件组件中的
<style></style>块也应纳入，但需确保stylelint-config-standard-scss已启用 - 若项目含 CSS-in-JS（如 styled-components），不要混进同一行命令，避免 parser 冲突报错
别用 HTML 快照锁死 class 名字
写 expect(el.className).toBe('button button--lg') 是反模式。组件内部重构 class 生成逻辑（比如从字符串拼接改成对象映射）会让测试崩，但最终渲染的样式可能完全没变。
- 正确做法是拆解验证：用
html-validate检查模板中 class 是否符合 BEM；用单元测试断言useButtonClasses({ size: 'lg' })返回值是否为{ root: 'button button--lg', icon: 'button__icon' } - 回归测试真正该锁定的是三件事：SCSS 输入 → CSS 输出 → 类名组合规则 → 最终应用到元素上的
class列表 - 最常被忽略的点：CI 中运行的 Dart Sass 版本必须与本地开发、生产构建一致，建议在
.gitlab-ci.yml或.github/workflows/ci.yml中显式指定sass:1.77.6（对应 Dart Sass 5.1.0）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
