英文:
Svelte giving warning for additional class selector on :global()
问题
我正在使用SCSS在我的sveltekit +layout.svelte文件中创建全局样式表。我找不到内置的方法来创建全局样式表，所以我只是使用了:global()。这是我使用的代码：
:global(:where(p, .content)) {
$size: 1rem;
&:not(:last-child) {
margin-block-end: #{$line-height}rem;
}
&.dropcap::first-letter {
$line-count: 2;
font-size: calc($size * (1 + ($line-count * $line-height)));
float: left;
line-height: 0;
vertical-align: middle;
clear: both;
}
}
（注：：where()被用于因为:global()不支持多个选择器）
第一个规则&:not正常工作，但第二条规则&.dropcap在终端显示未使用选择器的警告（它唯一匹配的内容将放在layout的<slot/>中），并且被从CSS输出中移除。当我使用&:global(.dropcap)时，Svelte也在CSS输出中包含了第二个:global()。如何让Svelte不要删除CSS？
英文:
I am using SCSS in my sveltekit +layout.svelte file to create a global stylesheet. I couldn't find a built-in way to make a global stylesheet so I resorted to just using :global(). This is the code I used:
:global(:where(p, .content)) {
$size: 1rem;
&:not(:last-child) {
margin-block-end: #{$line-height}rem;
}
&.dropcap::first-letter {
$line-count: 2;
font-size: calc($size * (1 + ($line-count * $line-height)));
float: left;
line-height: 0;
vertical-align: middle;
clear: both;
}
}
(note: :where() is used because :global() doesn't support multiple selectors)
The first rule of &:not works fine, but the second rule of &.dropcap shows a warning in the terminal of unused selector (the only content that will match it would go in the <slot /> of layout) and it gets removed from the css output. When I use &:global(.dropcap) svelte also includes the second :global() in the css output. How do I make svelte not remove the css?
答案1
得分: 0
For some reason, wrapping the problematic selector with :where made the warning goes away (and works).
:global(:where(p, .content)) {
$size: 1rem;
&:not(:last-child) {
margin-block-end: #{$line-height}rem;
}
&:where(.dropcap::first-letter) {
$line-count: 2;
font-size: calc($size * (1 + ($line-count * $line-height)));
float: left;
line-height: 0;
vertical-align: middle;
clear: both;
}
}
英文:
For some reason, wrapping the problematic selector with :where made the warning goes away (and works).
:global(:where(p, .content)) {
$size: 1rem;
&:not(:last-child) {
margin-block-end: #{$line-height}rem;
}
&:where(.dropcap::first-letter) {
$line-count: 2;
font-size: calc($size * (1 + ($line-count * $line-height)));
float: left;
line-height: 0;
vertical-align: middle;
clear: both;
}
}
答案2
得分: 0
:global()可能不会向内传播，你可能需要在每个地方都添加它。
对于全局样式表，通常更容易在<script>中导入它们，如下所示：
import '../styles/sheet.scss';
这需要设置构建以处理这些导入，SvelteKit使用的是Vite，默认情况下应该能够处理这一点。
英文:
The :global() might not propagate inward, you may have to add it everywhere.
For global stylesheets it usually is easier to import them in the <script> along the lines of:
import '../styles/sheet.scss';
This requires the build to be set up to handle such imports, SvelteKit uses Vite which should be able to do this by default.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论