@extend .class !optional 用于静默跳过缺失选择器的继承，避免编译中断；仅对 @extend 有效，格式固定且不生成 fallback 或警告；与 @import (optional) 和 CSS :optional 伪类无关。
@extend .class !optional 编译时跳过缺失选择器
加 !optional 是为了解决 @extend 目标类名在当前作用域中根本不存在时的编译中断问题。Less 默认遇到未定义的选择器会抛出 Extend directive with selector '.xxx' was not found 错误，而 !optional 让它静默跳过这一条扩展，继续编译其余内容。
常见错误现象：组件库按需引入后，某个子模块还没定义 .btn-base，但业务文件里已写了 @extend .btn-base，不加 !optional 就直接构建失败。
- 只对
@extend有效，不能用在变量、mixin 或@import上 - 必须紧贴选择器写，格式固定为
@extend .xxx !optional，空格和顺序都不能错 - 它不生成任何 fallback 样式，也不警告你“这里漏了定义”，只是删掉那行继承逻辑
- 如果该选择器本该存在（比如团队约定已定稿但尚未提交），加了
!optional反而掩盖问题，调试时很难定位样式丢失原因
@import (optional) 处理缺失的 Less 文件
@import (optional) 解决的是文件路径找不到时的中断问题，和 @extend !optional 完全无关。它告诉 Less：“这个文件爱在不在，找不到就当没这回事，别报 FileError”。
典型场景：主题包按需加载，@import (optional) "themes/dark.less" —— 如果项目没配 dark 主题，编译照常通过；但若配了却写错路径，也会被跳过而不提示。
立即学习“前端免费学习笔记（深入）”；
- 必须写成
@import (optional) "xxx.less"，括号、逗号、引号缺一不可 - 它不解决语法错误：文件找到了但内容有误（比如少个分号），依然会报
ParseError - 多个选项可共存，如
@import (optional, reference) "mixins.less" - Webpack/Vite 环境下，路径仍需能被 resolver 正确识别，
@import (optional) "foo.css"不会自动触发(css)模式，得明确写成@import (optional, css) "foo.css"
:optional 伪类和 !optional 完全无关
:optional 是原生 CSS 伪类，匹配 HTML 中未带 required 属性的表单控件；而 !optional 是 Less 编译器指令，只在 .less 文件编译阶段起作用。两者名字像，但运行时机、作用域、技术栈都不同。
容易混淆的点：
- 给
div加required属性 →:optional完全不生效（属性无效） - 用 JS 动态设置
el.required = true→ 浏览器不会更新:required样式（伪类只看初始 HTML） - 在 Less 里写
input:optional { color: #666; }是合法的，但里面的:optional和!optional没半点关系 - 试图在
@extend后面写@extend input:optional会直接报错——伪类不能作为继承目标
真正要小心的是“静默失效”而非报错
加 !optional 的目的不是让代码“看起来能跑”，而是承认某层抽象确实可能缺失且业务上可接受。一旦滥用，样式依赖就变成隐式契约：你不知道哪些 @extend 实际没生效，DevTools 里也看不出异样，只有视觉表现突然不对时才暴露问题。
CI/CD 流程中建议配合 stylelint-less 检查未声明即使用的扩展目标，比靠人眼 review 更可靠。另外，@import (optional) 成功后样式没生效，八成不是导入问题，而是加载顺序或 specificity 被覆盖——得去浏览器里查 computed styles，而不是反复改 Less 文件。
