引入Open-props导致Svelte v5默认布局错位问题求助

我搭建了一个新的Svelte v5项目，执行命令：

npm create vite@latest myapp -- --template svelte

随后在主文件App.svelte中导入Open-props样式表：

:global {
  @import "https://unpkg.com/open-props";
  @import "https://unpkg.com/open-props/normalize.min.css";
}

发现页面头部布局发生变化，从默认样式变为错位样式。我希望保留Open-props的功能，但不想改变原有布局，尝试了多种导入方式均无法排除该影响，请问遗漏了哪些元素或规则？

App.svelte核心标记内容如下：

<main>
  <div>
    <a href="https://vite.dev" target="_blank" rel="noreferrer">
      <img src={viteLogo} class="logo" alt="Vite Logo" />
    </a>
    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>
...
</main>

样式导入代码：

<style>
  :global {
    @import "https://unpkg.com/open-props";
    @import "https://unpkg.com/open-props/normalize.min.css";
  }
  ...
</style>

复现步骤：

1. 初始化Svelte v5项目
2. 执行npm install
3. 添加上述@import语句
4. 运行npm run dev

问题根源 #

布局错位的核心原因不是Open-props本身，而是你导入的normalize.min.css——它会重置浏览器的默认样式（比如移除body、h1的外边距，修改全局box-sizing规则等），和Svelte Vite模板自带的默认全局样式产生冲突，破坏了原有布局结构。Open-props的核心是CSS变量和工具类，本身不会修改页面布局。

具体解决办法 #

1. 仅导入Open-props核心变量（推荐）

如果不需要normalize的样式重置，直接去掉normalize.min.css的导入，只保留Open-props的变量部分，这样既能使用它的功能，又不会影响原有布局：

:global {
  @import "https://unpkg.com/open-props";
  /* 移除normalize.min.css的导入 */
}

2. 保留normalize但恢复原有布局样式

如果确实需要normalize的样式重置，可在全局样式中手动恢复Svelte模板的默认布局规则，覆盖normalize的影响：

:global {
  @import "https://unpkg.com/open-props";
  @import "https://unpkg.com/open-props/normalize.min.css";

  /* 恢复模板默认的main容器样式 */
  main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem;
    text-align: center;
  }

  /* 恢复h1的默认外边距 */
  h1 {
    margin: 0 0 1em 0;
  }

  /* 恢复logo的默认布局样式 */
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
  }
}

3. 调整样式导入顺序

将Svelte模板自带的全局样式放在normalize之后加载，利用CSS优先级覆盖重置规则。如果是在App.svelte中，可把模板原有的样式代码放在:global块的后面，或者确保原有样式的选择器优先级足够。

内容的提问来源于stack exchange，提问作者Matt W