Bootstrap v5 SCSS @extend自动生成.float-end时报找不到选择器

• Sass的@extend并非全量编译完成后再做全局选择器匹配，而是严格按照代码从上到下的解析顺序运行：当解析到某一行的@extend语句时，只会查找当前行之前已经被解析生成、处于当前作用域的CSS选择器，后续代码里动态生成的选择器对它来说完全不可见，这是很多人对extend逻辑的常见误解。
• Bootstrap v5的工具类不是提前写好的静态选择器，是在_utilities.scss内部通过循环遍历配置Map动态生成的。如果这些动态选择器的实际解析输出位置，晚于@extend语句的执行节点，就会直接触发“目标选择器未找到”的报错。
• 还有一层固定的规则限制：Bootstrap v5里所有带响应式断点的工具类（比如.float-sm-end），都会被包裹在对应的媒体查询块内部。这类处于媒体查询作用域内的选择器，本来就不支持被全局作用域的选择器通过@extend继承，这是Sass本身的设计规则，和导入顺序无关。

• 调整导入顺序，错开解析节点
  把自定义文件的导入放在所有Bootstrap SCSS导入的最末尾，等_utilities.scss内部的循环生成逻辑全部执行完毕、所有不带媒体查询的基础工具类（比如.float-end）已经被Sass识别为已存在的选择器后，再在自定义文件里写@extend .float-end，可以解决大部分非响应式工具类的extend报错问题。注意不要在Bootstrap核心文件的导入流程中间插入自定义文件，避免解析顺序错位。
• 直接调用Bootstrap内置的工具类mixin
  这是Bootstrap官方推荐的复用方式：所有工具类背后的样式逻辑，都封装成了可直接调用的独立mixin，不需要依赖动态生成的选择器就能复用。比如要实现和.float-end完全一致的样式，直接在自定义类中写@include float-end(); 即可，完全不存在作用域匹配、选择器找不到的问题。
• 用占位符绕开动态选择器的匹配限制
  如果一定要用extend的代码合并特性，可以在导入Bootstrap utilities之后、导入自定义文件之前，先声明一个无实际样式的占位选择器：%float-end { @extend .float-end; }，之后在自定义文件里通过@extend %float-end 继承这个占位符，绕开直接匹配动态生成选择器的报错。
• 响应式工具类的特殊处理
  所有带媒体查询的响应式工具类，不管怎么调整导入顺序都无法通过全局extend继承，这类场景只能直接调用对应mixin，或者在自定义类内部手动写对应断点的媒体查询规则。

内容的提问来源于stack exchange，提问作者Tex0gen