简体   繁体   English

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

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.我的两个苗条套件页面具有相似的样式,因此我将其提取到一个 scss 文件,并使用 @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.它工作正常,但是当我从我的一个不使用该样式的页面到使用该样式的页面 go 时,原始页面采用该样式。 If I go back, the page still has that styling, and I need to refresh in order to remove it.如果我返回 go,页面仍然具有该样式,我需要刷新才能将其删除。

For example if on page 1 I don't have any styling on code elements but on page 2 I import a file with:例如,如果在第 1 页我对code元素没有任何样式,但在第 2 页我导入了一个文件:

code {
   background-color: green;
}

If i go from page 1 to page 2, back to page 1, the <code> will have a green background.如果 i go 从第 1 页到第 2 页,再回到第 1 页, <code>将具有绿色背景。

How do i fix this?我该如何解决?

I've tried using import "../some-styles.scss" on the scrip tag, but there's some issues with that.我尝试在脚本标签上使用import "../some-styles.scss" ,但存在一些问题。 Such as :global() not working, and some styles not being applied.:global()不起作用,一些 styles 没有被应用。

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 个回复

I would recommend not using :global without scoping it first, otherwise those rules really should apply globally.我建议不要在没有首先确定范围的情况下使用:global ,否则这些规则确实应该在全球范围内适用。

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.如果您有多个应使用该样式的页面,则可以定义一个 class 用作某些根容器上的指示器,并且如果需要,仅在该 scope 中使用:global

Eg例如

.page-style {
  :global(input) {
     // ...
  }
}
1 当您返回时,页面的一部分保留在内存中。 如何从旧的页面实例中释放资源? - A part of page stays in memory when you go back. How can I free resources from that old instance of page?

我正在开发通用Windows平台上的应用程序。 我注意到在页面之间浏览几分钟后,我的应用在低内存设备上崩溃了。 我尝试使用VS2015的诊断工具,这是我发现的结果: 每次我从SectionPage转到ItemPage ,然后返回SectionPage ,该ItemPage一些小对象 ...

2 通过在组件内部设置Svelte组件的{@html ...}标签<style> tag (Unused CSS selector) - Styling a {@html…} tag of a Svelte component by ising the in-component <style> tag (Unused CSS selector)

我试图在Svelte组件的{@hml ...}标签内部呈现的HTML标签中添加一些样式,但它似乎只继承了父级的样式({@html ...}的容器标签)。 此外,弹出Unused CSS选择器错误,显示我的Svelte {@html ...}标记内的特定HTML标记的样式选择器仅不起作用。 S ...

5 从手机查看时样式移动 - Styling moving when viewed from phone

我的代码在 pc 上运行良好,但是当我从手机查看此代码时有一个空白区域。 有没有简单的方法来解决这个问题? PC 视图I电话视图 (iphone X) 编辑:是的,正在移动的东西是内联的,所以它不会占用整个宽度,这就是它可能移动的原因,我如何将它们变成它们具有整个页面的宽度(我认为这会解决它)。 ...

2021-01-20 23:22:41 2 44   html/ css
6 返回一页时,JavaScript工具提示div停留在DOM中 - JavaScript tooltip div stays in DOM when going back one page

当我单击tooltip ,内容将显示在页面上。 页面中显示了保存工具提示内容的&lt;div&gt; 。 但是,当我返回上一页时,工具提示div仍然显示。 我尝试添加一个事件监听器onHashChange并添加隐藏的元素,但这没有用。 返回上一页时,这是div: 我尝试 ...

8 旧式的chrome新标签页会回来吗? - Will old-style chrome new tab page come back?

也许是从chrome 32开始,新的标签页已更改... 拇指太小,最近关闭的标签消失了,等等。 这些变化给我带来很大麻烦。 最初,我可以启用Instant-extended-api标志来设置,但现在不起作用。 我一直在寻找解决方案,但是所有的坏消息,例如(来自chrome ...

9 将样式应用于标签时使样式覆盖另一种样式 - Make styling override another style when applying it to a tag

我想将我的下拉文本大小设置为更小(15px),但由于它在我的标签中,因此它的样式为我的其他导航样式。 我试图创建类,但它似乎没有改变任何东西,如果它改变了,它会转到默认的无样式导航。 (紫色和下划线) 我的标题标记: 还有我的标题样式: 有没有办法让我的向下文字变小? 下拉代码: ...

2019-01-30 01:29:38 1 36   html/ css
暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

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