无法通过 html 访问 css 文件

Question

我正在尝试从 app.html 访问 main.css 以使 Tailwind CSS 正常工作，因为如果我将它放在 .svelte 文件中的样式括号中，那么它本身给我一个错误，谁知道为什么

<link rel="stylesheet" href="./routes/main.css">

不起作用？

HTML 我正在尝试访问 CSS

<head>
  <meta charset="utf-8" />
  <link rel="icon" href="/favicon.png" />
  <link rel="stylesheet" href="./routes/main.css">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  %svelte.head%
</head>

CSS 文件，如果它必须用它做任何事情

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .nav-btn {
        @apply font-medium
        dark:hover:bg-gray-300 hover:bg-gray-800
        hover:text-white dark:hover:text-black
        rounded-lg transition-colors duration-300
        px-3 py-1;
    }
}

.h1{
    color: aqua;
}

Answer 1

您的 app.html 中只能引用 static 中的文件。如果将文件移到那里，就可以找到它。但是，在您的情况下，这可能不起作用，因为 CSS 文件不是最终文件（TailwindCSS 可能需要先处理它），并且 static 中的内容是静态的。要解决您的特定问题，请在 index.svelte 或 main __layout.svelte:

的脚本标记内导入 css 文件

<script>
  import './path/to/your/main.css';
</script>

本文很好地概述了如何设置 TailwindCSS 和 SvelteKit：https://codechips.me/tailwindcss-sveltekit-the-easy-way/

无法通过 html 访问 css 文件

Unable to get access of css file trough html

html

css

svelte

tailwind-css