gpt4 book ai didi

Why does SASS compiler adds [dir] at the beginning?(为什么SASS编译器在开始时添加[dir]?)

转载 作者:bug小助手 更新时间:2023-10-28 13:43:45 28 4
gpt4 key购买 nike



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?

您使用什么配置来吞咽?

优秀答案推荐

After much more digging, I found out the cause. My gulpfile.js uses gulp-postcss which adds the [dir] directive like this postcss([rtl()]).

经过更多的挖掘,我找到了原因。我的gupfile.js使用gup-postcss,它添加了类似postcss([rtl()])的[dir]指令。


Removing that stopped this behavior.

移除会阻止这一行为的东西。


更多回答

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com