实时服务器未加载 css 文件

Live-server not loading css file

我有一个 css 文件 link 使用我的 html 文件编辑。通过实时服务器加载 html 文件时,我的 css 无法正常工作。

css 在直接通过浏览器打开 html 文件时工作正常。我的 css 文件位于 html 文件所在的目录之外。当我的 npm 脚本使用 live-server 作为 npm start 时,没有任何参数,它只显示我工作区的所有文件,如果我单击我的 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 start 时,我的 html 文件在我的浏览器上加载正常,但由于某种原因 linked css 文件未加载。 css link 代码应该没问题,因为它在直接从浏览器打开时可以正常工作。 css 文件是否需要在同一目录中?

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

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

我能够通过在 vscode 上重新安装实时服务器扩展来让它工作。希望这对您有所帮助!

在 VS Code 中,右键单击 style.css 和 select“复制相对路径”,并将其粘贴到 link 标签 href="style.css",不要尝试通过 select 外部路径或手动输入来 link,当我正在为同一问题寻找解决方案时当场为我工作,但我没有找到任何,试了这个作为我睡觉前的最后一次尝试!!

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

The server is a simple node app that serves the working directory and its subdirectories.

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

一般来说,在使用 live-server 时,请尝试创建一个 public 或 dist 目录来存放所有静态内容。这是一个示例目录结构,它将打字稿编译到 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 查看它正在服务的目录之外。

这里是 live-server documentation 有关配置选项的更多信息

我必须向实时服务器提供 CSS:

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

我不知道为什么,但这解决了它。

注意:在此处的示例中,我显示了 bootstrap 的路径,但同样的事情也适用于我的自定义 css 文件。

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