提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文简体 中文繁体 中英对照 版本，有任何建议请联系yoyou2525@163.com。
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.
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) {
// ...
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.