必须用@projectwallace/postcss-bem-linter，原版已归档且不支持嵌套、scss变量及.block__elem--mod层级识别；报“element not under block”因插件不自动推断上下文，须在css文件顶部显式声明/ postcss-bem-linter: define .block /，否则所有bem类均被视作游离。
必须用 @projectwallace/postcss-bem-linter，原版 postcss-bem-linter 已归档，不支持嵌套规则、SCSS 变量，且无法识别 .block__elem--mod 中的修饰符层级——装错包，校验就等于没开。
为什么 postcss-bem-linter 总报 “element not under block”？
它不靠类名前缀自动推断上下文。哪怕你写了 .header__logo，只要没在 CSS 文件顶部加声明注释，插件就认为这个元素是游离的。
- 必须在首个 BEM 类出现之前，写：
/* postcss-bem-linter: define .header */ - 多个 block 共存？每个文件只声明一个，或拆成独立文件（如
card.css顶上写define .card） - 用了 SCSS 嵌套（比如
&__title），编译后仍是.list__title，但插件运行在 PostCSS 层，仍需顶部声明define .list - 动态拼接类名（如
class="header__${state}"）静态分析不到，必须加入ignore列表，否则永远过不了
postcss.config.js 里 ignore 配置怎么写才不漏不误？
默认模式下，.js-toggle、.is-open、.u-hidden 全被当非法 BEM 报错——这不是规则错了，是你没告诉插件“这些不算”。
- 必须显式传入
ignore: [/^js-/, /^is-/, /^has-/, /^u-/]，正则带^，否则.button-is-active也会被误放过 - 项目若用 utility 类（如
.u-text-center）、JS 钩子类（.js-modal-trigger）、状态类（.is-loading），全得列进ignore - 漏配
ignore是新人踩坑最高频原因，比写错命名还常见
Vite 或 Webpack 里插件根本没执行？关键检查点
插件配置再对，链路断了就白搭。Vite 默认对 .css 走 esbuild，Webpack 若 loader 顺序错，postcss-bem-linter 就像没装过。
- Vite：确认
vite.config.ts中css.postcss.plugins数组包含该插件，且未被css.preprocessorOptions绕过 - Webpack：确保
postcss-loader在css-loader之前，并检查postcss.config.js路径是否被resolveLoader干扰 - 验证是否生效：故意写个错命名，比如
.card__footer__text（非法三层），看构建是否报错；不报就是链路没走通
真正难的不是配对参数，而是让每个 define .block 注释真实对应组件边界——它不是语法糖，是人工划定的作用域契约；一旦和实际 DOM 结构或组件拆分不一致，校验就变成噪音源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
