简体   繁体   中英

Styling imported from svelte style tag stays when moving back to old page

提示:本站收集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.

1 anwsers

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) {
     // ...
  }
}
5 Styling moving when viewed from phone

My code works fine on pc, but there is a white space when I view this code from a mobile. Is there a simple way to fix this? PC VIEW I PHONE VIEW (ip ...

2021-01-20 23:22:41 2 44   html/ css
暂无
暂无

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.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM