SASS编译Bootstrap 5.3自动添加[dir]的原因及解决方法

原因 #

Bootstrap 5.3内置了RTL（从右到左文本方向）样式处理机制，当使用background-color这类可能和文本方向相关的属性时，RTL模块会自动给对应的CSS选择器添加[dir]前缀——这是Bootstrap默认开启RTL支持时的自动行为，仅针对部分与方向关联的CSS属性触发，用于区分LTR（从左到右）和RTL模式下的样式规则。

解决方法 #

方法1：全局关闭RTL支持 #

在导入Bootstrap核心样式之前，设置$enable-rtl: false禁用RTL功能，编译时就不会自动添加[dir]前缀：

$enable-rtl: false;
@import '../../node_modules/bootstrap/scss/bootstrap';

@import 'other/file.scss';

[data-bs-theme=light] .bg-default {
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

方法2：用@at-root跳出RTL嵌套规则 #

如果不想全局关闭RTL支持，可使用Sass的@at-root指令将自定义选择器从RTL的嵌套上下文剥离，避免被添加前缀：

@import '../../node_modules/bootstrap/scss/bootstrap';

@import 'other/file.scss';

@at-root [data-bs-theme=light] .bg-default {
    background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

方法3：移除RTL相关的手动导入 #

检查你的Sass文件，如果手动导入了Bootstrap的RTL模块（比如@import '../../node_modules/bootstrap/scss/rtl'），直接删除该行导入代码即可停止[dir]前缀的自动添加。

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