我有一个与HTML文件链接的CSS文件。通过实时服务器加载html文件时，我的css无法正常工作。
直接通过浏览器打开html文件时，css可以正常工作。我的css文件不在html文件所在的目录之外。当使用live-server作为我的npm脚本启动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文件在浏览器中可以很好地加载，但是由于某些原因，链接的css文件没有加载。 CSS链接代码应该很好，因为直接从浏览器中打开时，它可以正常工作。 css文件需要在同一目录中吗？
答案 0 :(得分：1)
我能够通过在vscode上重新安装实时服务器扩展来使其工作。希望这会有所帮助！
答案 1 :(得分：0)
请检查链接标记属性，并正确拼写其值。 text \ css 将永远不会加载CSS文件。正确的是 text / css （它是正斜杠）。另外，尝试从文件资源管理器中打开html文件，并检查其是否正常运行。
<link rel="stylesheet" type="text/css" href="style.css" />
答案 2 :(得分：0)
在VS Code中，右键单击style.css并选择“复制相对路径”，然后将其粘贴到链接标签href =“ style.css”中，请勿尝试通过选择外部路径进行链接或手动输入，当时我正在为同一个问题找到解决方案，当时为我工作，但我没有找到任何解决方案，只是尝试了这一点，作为我上床睡觉前的最后尝试！
答案 3 :(得分：0)
发生这种情况的原因我们可以从实时服务器文档中看到：
<块引用>服务器是一个简单的节点应用程序，它提供工作目录和 其子目录。
如果指定的是文件而不是目录，或者目录中不包含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，了解有关配置选项的更多信息
答案 4 :(得分：-1)
重新安装实时服务器，它将开始工作，您无需更改任何内容。