主页 / coding / 问题 / 78816706
Accepted
Patrick Kenny
Asked: 2024-07-31 21:42:58 +0800 CST

如何向 Svelte / SvelteKit 添加全局 SCSS 文件？

  • 772

我正在将 React 应用迁移到 Svelte。React 应用没有限定其 CSS 的范围；所有内容都包含在一个由几十个 SCSS 文件组成的样式表中。此样式表只有 8 kb，因此我想在我的 Svelte/SvelteKit 应用中将其用作全局 SCSS 文件。

sveltekit repo 中对全局样式进行了长时间的讨论，但我无法在那里找到解决方案。

根据该讨论，似乎 SCSS 导入应该在全球范围内完成+layout.svelte。

因此我添加了以下几行：

<style lang="scss">
    @import '../assets/css/AppGlobal.scss';
</style>

然后我用构建了应用程序npm run build；出现了几个关于未使用的 CSS 选择器的警告，但构建已完成。

然后我检查了应用程序npm run preview，发现我编译的 SCSS 没有加载到任何地方（不在/路径中）。

我需要做什么才能让 SCSS 在全球范围内运行？这是我使用 Svelte 的第一天。

Svelte 4 和 SvelteKit 2。

sass

1 个回答

  1. Best Answer

    将在中导入它<script>，否则它默认受范围限制，并且所有不适用于当前组件的规则都将被删除。

    <script>
  import '../assets/css/AppGlobal.scss';
</script>

    （有一些方法可以使用 来取消样式的范围:global，但可能需要预处理。）

    • 1

相关问题