必须直接 import 源 scss 文件而非读取 dist/css，否则无法捕获 @use 路径错误、变量未定义、语法错误等编译期问题，且 dart sass 版本差异会导致误报快照失败。
直接用 Jest + jest-transform-css 做 SCSS 快照测试，但必须让测试入口指向源 .scss 文件，而不是读取编译后的 dist/*.css —— 否则根本测不到 @use 路径错误、变量未定义这些真实编译期问题。
为什么不能读取 dist 目录下的 CSS 文件做断言
常见错误是写 fs.readFileSync('dist/button.css', 'utf8') 然后比对字符串。这绕过了实际编译流程，导致三类问题逃逸：
-
@use模块路径拼错（比如@use 'src/styles/vars'实际应为@use '~styles/vars'），编译时会报错，但你的测试完全感知不到 - Dart Sass 版本升级引发的字节级差异（如 5.0.0 和 5.1.0 对
@use解析顺序不同）会被当成“快照不一致”误报，而你根本没在测编译环节 - SCSS 语法错误（如嵌套漏大括号、变量名拼错）压根不会触发，因为读的是已存在的产物文件
如何配置 Jest 正确 import SCSS 源文件
关键在 transformer：必须支持 .scss 后缀，并在运行时调用 Dart Sass 解析 @import/@use、展开变量和混合宏。推荐使用 jest-transform-css 并显式指定 Sass 引擎：
- 安装：
npm install --save-dev jest-transform-css sass - 在
jest.config.js中配置：transform: { '\.scss$': ['jest-transform-css', { sass: { implementation: require('sass') } }] } - 测试文件里写：
import buttonCss from './button.scss';—— 注意不是./dist/button.css - 确保测试路径不含
node_modules/或dist/，否则 Sass 可能因路径解析策略变化导致空格/注释输出不一致，白触发快照失败
stylelint 配置 BEM 校验必须设全三个参数
只装 stylelint-selector-bem-pattern 插件却不设参数，等于形同虚设。BEM 破坏常静默发生，比如把 .card__title--large 写成 .card-title--large，CSS 仍生效，但后续维护必然漏改节点。三项必须显式声明：
-
componentName: 'lowercase'—— 否则.Card这种 PascalCase 会被放行 -
style: 'bem'—— 不设这个，双下划线结构（__）根本不校验 -
allowMultipleModifiers: false—— 否则.user-card__avatar--large--dark这种非法双 modifier 就逃过去了
CI 中跑命令要限定范围：npx stylelint "src/**/*.{scss,vue}"，避免扫到 node_modules 或 dist 下的第三方样式——它们不该受你团队的 BEM 规则约束。
别锁死 HTML 中的 class 字符串
写 expect(el.className).toBe('button button--lg') 是反模式。组件内部重构 class 生成逻辑（比如从模板字符串改成 clsx 对象映射），测试立刻崩，但最终渲染的样式可能完全没变。真正该验证的是两件事：
- HTML 模板中 class 是否符合 BEM：用
html-validate扫描.vue或.html文件 - SCSS 编译输出是否稳定：用快照测试验证 CSS 字符串本身，而非它被谁用了
最易被忽略的一点：SCSS 回归测试必须和线上构建环境用**完全一致的 Dart Sass 版本**。哪怕只是小版本号差一级（5.0.0 vs 5.1.0），@use 解析顺序变化就足以让快照字节级不等，CI 直接报 toMatchCssSnapshot() 失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
