从 svelte 样式标签导入的样式在移回旧页面时会保留

Question

Two of my svelte kit pages have similar styling, so i extracted it to a scss file, and imported the file using @use. Like so:

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

It works fine and all, but when I go from one of my pages that doesn't use that styling to a page that does use the styling, the original page takes on that styling. If I go back, the page still has that styling, and I need to refresh in order to remove it.

For example if on page 1 I don't have any styling on code elements but on page 2 I import a file with:

code {
   background-color: green;
}

If i go from page 1 to page 2, back to page 1, the <code> will have a green background.

How do i fix this?

I've tried using import "../some-styles.scss" on the scrip tag, but there's some issues with that. Such as :global() not working, and some styles not being applied.

I thought about creating a base component for both of them, but they have different structures so I don't know how well that would work.

Answer 1

I would recommend not using :global without scoping it first, otherwise those rules really should apply globally.

If you have multiple pages that should use the style, you could define a class to be used as indicator on some root container and only use :global within that scope if required.

Eg

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