Visual Studio Code Live Server 看起来很棒，但 CSS 未在浏览器中加载

Question

当我为我的网站选择“使用 Live Server 打开”时，它看起来很棒。 CSS 工作正常，它正在做我想做的事。 但是当我尝试直接从我的计算机（没有 VS Code）打开其中一个页面的文件时，CSS 将不会加载。 我网站上的一个页面具有完全相同的代码，连接到完全相同的 CSS 代码（除了用另一种语言编写之外，它是相同的）看起来很完美，但这个页面很垃圾。 关于如何解决问题的任何想法？

---

Answer 1

我有同样的问题。 就我而言，它是由我的 css 文件路径中的拼写错误引起的。 我不知道为什么肝服务器忽略它并正确放置文件。

问题是我有：

<link href="/style.css">

代替：

<link href="style.css">

所以检查你的文件路径。 也许问题就在那里。

Answer 2

基本实时服务器配置为在服务器的根文件夹中启动。
因此，CSS 文件的相对路径将根据通过实时服务器启动或直接从浏览器启动而改变。
如果我理解正确的话。 我遇到了这个错误。

Answer 3

从网站根文件夹启动 VSCode“Go Live”服务器

我遇到了这个问题，因为我在 html 文件夹上方的文件夹中的 VSCode 中工作时启动了实时服务器，我的 .html 文件 - 我的项目（和 GIT 存储库）是一个更高的级别。 我以为是浏览器的问题，搜索了一下，发现了很多误导性的“解决方案”。

但是，在阅读了 Yannh 的回答后，我突然想到打开一个新的 VSCode 窗口，该窗口仅包含我的网站根“html”文件夹； 从那里点击“Go Live”启动了带有 CSS 的网站。

我保持我的原始工作窗口（带有完整的 GIT 存储库）打开，在那里进行更改，这些更改反映在实时本地浏览器预览中的保存中。

Answer 4

也许你使用了 SCSS 文件并且它没有被编译？

Answer 5

您是否使用过 SCSS 进行样式设置？

假设你使用过 SCSS，浏览器无法解释 SCSS 文件，所以 VS Code 有一个扩展可以将 SCSS 转换为 CSS 并将其链接到你的 html 文件，这也许就是为什么你的文件在使用实时服务器时加载的原因。

尝试使用https://jsonformatter.org/scss-to-css将您的 SCSS 转换为 CSS，然后将其链接到 HTML。

Answer 6

我有同样的问题。 原因是实时服务器显示 mit 具有 25% 缩放比例的页面。 不知道为什么。 所以我编码的所有东西都太大了 75%。