实时服务器未加载 css 文件

Question

我有一个 css 文件与我的 html 文件链接。 通过实时服务器加载 html 文件时，我的 css 无法正常工作。

直接通过浏览器打开html文件时css工作正常。 我的 css 文件位于 html 文件所在的目录之外。 当我的 npm 脚本使用 live-server 作为 npm 启动时，没有任何参数，它只显示我工作区的所有文件，如果我单击我的 html 文件所在的目录，css 工作。 但是，如果我将 html 文件添加为 live-server 的参数，它只会加载 html 文件，而不会对 css 进行任何更改。

html：

<link rel='stylesheet' type='text/css' href='../styles.css'>

package.json：

"start": "live-server home/index.html"

或者

"start": "live-server home"

或者

"start": "live-server home/index.html && styles.css"

都有相同的结果。 仅有的

"start": "live-server"

works，它显示了浏览器上的工作目录。 我单击主目录，然后加载 html 文件和 css。

当从终端开始输入 npm 时，我的 html 文件在我的浏览器上加载正常，但由于某种原因未加载链接的 css 文件。 css 链接代码应该没问题，因为它在直接从浏览器打开时可以正常工作。 css文件是否需要在同一个目录下？

Answer 1

请检查链接标签属性，其值拼写正确。 text\\css永远不会加载 css 文件。 正确的是text/css （它是正斜杠）。 还尝试从文件资源管理器打开 html 文件并检查它是否正常工作。

<link rel="stylesheet" type="text/css" href="style.css" />

Answer 2

我能够通过在 vscode 上重新安装实时服务器扩展来让它工作。 希望这可以帮助！

Answer 3

在 VS Code 中，右键单击 style.css 并选择“复制相对路径”，并将其粘贴到链接标签 href="style.css" 中，不要尝试通过选择外部路径或手动键入来链接，为我当场正在寻找相同问题的解决方案，但我没有找到任何解决方案，只是尝试将其作为我睡觉前的最后一次尝试！！

Answer 4

发生这种情况的原因我们可以从实时服务器文档中看到：

服务器是一个简单的节点应用程序，它为工作目录及其子目录提供服务。

如果指定的是文件而不是目录，或者目录中不包含live-server要加载的assets，则会导致404。 但是，在live-server的默认设置中，如果出现404 ，它将默认尝试读取 index.html，这会导致 MIME 类型错误，即它正在尝试为许多面临这种混淆的人加载“text/html”。

通常，在使用 live-server 时，请尝试创建一个 public 或 dist 目录，以用于保存所有静态内容。 下面是一个将 typescript 编译到 dist/js 目录并将 sass 编译到 dist/css 目录的示例目录结构：

.
├── dist
│   ├── css
│   │   └── index.css
│   ├── index.html
│   └── js
│       └── index.js
├── package.json
├── src
│   ├── app.ts
│   ├── index.ts
│   └── sass
│       └── main.scss
└── yarn.lock

然后，您可以运行“live-server dist”——关键因素是我没有要求 live-server 查看它所服务的目录之外。

这是有关配置选项的更多信息的实时服务器文档

Answer 5

我必须向 live-server 提供我的 CSS 的完整路径：

<link rel="stylesheet" type="text/css" href="http://localhost:8888/login/css/bootstrap.min.css" />

我不知道为什么，但这修复了它。

注意：在这里的示例中，我显示了引导程序的路径，但同样的事情也适用于我的自定义 css 文件。

Answer 6

我遇到了问题，我从你管的视频中得到了解决方案。 不管怎样，解决方案是不要将 css 的整个路径放在链接中。 只需复制 css 文件名，例如“style.css”，然后将其放入您的 href 中……很简单……