将 css 文件与 svelte 组件链接

Question

我正在尝试将 css 文件与我的 svelte kit 组件链接起来。我使用 link 元素来链接它，但它不起作用。如果我制作了内部样式，则 css 样式将应用于组件，但是当我尝试将组件与 css 文件链接时，它不起作用，并且样式不应用

<svelte:head>
<link href="../style/index.css">
</svelte:head>
<h1>Welcome to your library project</h1>
<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>`

Answer 1

您只需使用@import带有文件名的 css 指令即可将样式导入到 svelte 组件中。例子：

...

<h1>This is a title</h1>
<p>More content</p>

...

<style>
@import './styles.css';
</style>

如果您想为不同的组件重用某些 css，这很有用，但通常最好将样式隔离到它们自己的组件中。另一种选择是使用该+layout.svelte文件并将 CSS 放在那里，只要所有组件都采用相同的布局，它们就会共享该样式。