无法通过 html 访问 css 文件答案

【问题标题】：Unable to get access of css file trough html无法通过 html 访问 css 文件
【发布时间】：2021-12-15 01:37:08
【问题描述】：

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

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

没有用？

我试图在其中访问 CSS 的 HTML

<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;
}

【问题讨论】：

href="./routes/main.css" 问题可能是. 在您的文档根目录中使用以/ 开头的绝对路径

标签： html css tailwind-css svelte

【解决方案1】：

只有static 中的文件可以在app.html 中引用。如果将文件移到那里，则可以找到它。但是，在您的情况下，这可能不起作用，因为 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/

【讨论】：