6

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

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

html:

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

包.json：

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

或者

"start": "live-server home"

或者

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

都有相同的结果。仅有的

"start": "live-server"

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

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

4

5 回答 5

3

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

于 2020-03-19T20:48:39.827 回答
2

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

<link rel="stylesheet" type="text/css" href="style.css" />
于 2019-09-06T21:43:45.970 回答
1

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

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

如果规定了文件而不是目录，或者该目录不包含live-server要加载的资产，则会导致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 查看它所服务的目录之外。

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

于 2021-07-05T21:23:16.463 回答
1

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

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

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

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

于 2021-11-11T16:58:44.440 回答
0

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

于 2020-07-31T18:18:23.263 回答