实时服务器未加载 css 文件答案

【问题标题】：Live-server not loading css file实时服务器未加载 css 文件
【发布时间】：2019-06-28 13:49:52
【问题描述】：

我有一个与我的 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'>

package.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文件需要在同一目录下吗？

【问题讨论】：

你必须在“styles”对象下的 src/angular.json 文件中包含你的样式
@TheUnKnown 我没有使用 Angular。
那么请解释一下您使用的是什么堆栈以及如果它不是角度的，您是如何使用 npm 运行服务器的。
@TheUnKnown 无。我决定不在这个网站上使用 React。这就是为什么我使用 live-server 而不是做 React 内置的 npm start 的原因。如果没有更好的方法，我可能只是将 html 文件和 css 文件放在同一目录中。

标签： html css npm package.json npm-live-server

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

一切都在生产中工作。只是不在实时服务器上。

【解决方案3】：

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

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

如果规定的是文件而不是目录，或者目录不包含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 查看它所服务的目录之外。

这里是实时服务器documentation，了解有关配置选项的更多信息

【讨论】：

感谢解决方案对我有用。我使用的是 Windows，然后我添加了命令 live-server 'foldername'

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

我遇到了问题，我从 YouTube 视频中得到了解决方案。无论如何，解决方案是不要将 css 的整个路径放在链接中。只需复制“style.css”之类的css文件名并将其放入您的href中......很简单......?

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。