I am trying to compile Bootstrap 5.3 along with custom SASS files.
我正在尝试编译Bootstrap 5.3以及定制的sass文件。
This is what I have
这就是我的东西
@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;
}
Oddily, last section generates the following CSS
奇怪的是,最后一节生成了下面的css
[dir] [data-bs-theme=light] .bg-default {
background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
I expected see the following CSS instead
我预计会看到下面的css
[data-bs-theme=light] .bg-default {
background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
It adds [dir]
at the beginning. Why does it add [dir]
? How can I prevent it from adding [dir]
directive?
它在开头添加了[dir]。为什么要添加[dir]?我怎样才能阻止它添加[dir]指令?
Having the [dir]
seems to be preventing me from using the custom class. For example
拥有[dir]似乎阻碍了我使用自定义类。例如
<div class="bg-default">Hello world!</div>
does not change the color of the divider.
不会更改分隔线的颜色。
UPDATED
已更新
When background-color
is used the [dir]
seems to be added.
当使用背景色时,似乎添加了[dir]。
[data-bs-theme=light] {
.bg-default {
background-color: rgba(248, 249, 250, 1);
}
.text-bg-default {
color: var(--bs-body-color);
background-color: rgba(248, 249, 250, 1);
}
}
The generated CSS looks like this
生成的css如下所示
[dir] [data-bs-theme=light] .bg-default {
background-color: rgb(248, 249, 250);
}
[data-bs-theme=light] .text-bg-default {
color: var(--bs-body-color);
}
[dir] [data-bs-theme=light] .text-bg-default {
background-color: rgb(248, 249, 250);
}
更多回答
I can't reproduce your issue on SassMeister. What compiler do you use? Does it happen if you remove the @import
?
我不能在SassMeister上转载你的问题。你用的是什么编译器?如果删除@IMPORT,是否会发生这种情况?
I am using npmjs.com/package/gulp-dart-sass with gulp. It happens even if I remove the @import
it seems I tried to compile this it still added it ` [data-bs-theme=light] .bg-default { background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important; } `
我正在使用npmjs.com/Package/gup-dart-sass并吞咽。即使我删除了@IMPORT似乎我试图编译它,它仍然添加了它`[data-bs-heme=light]。bg-Default{背景颜色:RGBA(var(--bs-light-rgb),var(--bs-bg-opacity))!重要;}`
Their docs talk about it here a little. Something to do with RTLCSS postprocessor?
他们的医生在这里谈了一点。与RTLCSS后处理器有关?
@Ouroborus thank you. I don't see where [dir]
is explained on that docs link.
@Ouroborus谢谢。我看不出文档链接上哪里解释了[dir]。
What config do you use for gulp?
您使用什么配置来吞咽?
我是一名优秀的程序员,十分优秀!