从svelte样式标签导入的样式在移回旧页面时保持不变

Question

我的两个svelte工具包页面具有相似的样式，所以我将其提取到scss文件中，并使用@use导入该文件。像这样：

<style lang="scss">
@use "../some-styles.scss";
</style>

它工作得很好，但当我从一个不使用该样式的页面转到一个使用了该样式的网页时，原始页面就会采用该样式。如果我回去，页面仍然有那个样式，我需要刷新才能删除它。

例如，如果在第1页上我对code元素没有任何样式，但在第2页上我导入了一个文件，其中包含：

code {
background-color: green;
}

如果我从第1页转到第2页，再回到第1页，<code>将有一个绿色背景。

我该怎么解决这个问题？

我试过在scrip标签上使用import "../some-styles.scss"，但有一些问题。例如:global()不起作用，某些样式未应用。

我曾想过为它们创建一个基础组件，但它们有不同的结构，所以我不知道效果如何。

Answer 1

我建议在没有首先确定范围的情况下不要使用:global，否则这些规则确实应该全局应用。

如果有多个页面应该使用该样式，则可以定义一个类用作某个根容器上的指示符，并且如果需要，只在该范围内使用:global。

例如

.page-style {
:global(input) {
// ...
}
}