代码之家 › 专栏 › 技术社区 › Patrick Kenny

如何将全局SCSS文件添加到Svelte/SvelteKit?

sveltekit svelte sass

Patrick Kenny · 技术社区 · 7 月前

我正在将React应用程序迁移到Svelte。React应用程序不限定其CSS范围;所有内容都在一个由几十个SCSS文件组成的样式表中。这个样式表只有8kb,所以我想在我的Svelte/SvelteKit应用程序中将其用作全局SCSS文件。

根据讨论,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。

1 回复 | 直到 7 月前

brunnerh 7 月前

将在 <script> ,否则默认情况下它是作用域,所有不适用于当前组件的规则都将被删除。

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

(有一些方法可以使用 :global ,但可能需要预处理。)

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

Henry · scss或css中的calc函数不起作用

2 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

2 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前