html Live服务器未加载CSS

f1tvaqid  于 5个月前  发布在  其他
关注(0)|答案(7)|浏览(75)

我有一个CSS文件链接到我的HTML文件。
通过live-server加载HTML文件时,CSS不会加载。
当直接通过浏览器打开HTML文件时,CSS工作正常。
我的CSS文件在HTML文件所在的目录之外。当在我的npm脚本中使用live-server时,使用npm start启动它,没有任何参数,它只显示我工作区的所有文件,如果我单击主index.html所在的目录,CSS就可以工作。
但是如果我在npm脚本中添加路径作为参数,它只会加载HTML文件,而不会加载任何CSS。
HTML文件index.html中的链接:

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

字符串
在package.json中:

"start": "live-server home"


上面的代码不会加载CSS。

"start": "live-server"


works,它在浏览器中显示工作目录。

  • 我点击主目录,然后HTML文件加载CSS。
    当从终端输入npm start时,我的HTML文件在浏览器中加载良好,但由于某种原因,链接的CSS文件没有加载。
    CSS链接应该没问题,因为它在直接从浏览器打开时可以正常工作。
    CSS文件需要在同一个目录下吗?
fsi0uk1n

fsi0uk1n1#

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

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

字符串

qnzebej0

qnzebej02#

我可以通过在vscode上重新安装live server扩展来让它工作。希望这能有所帮助!

unftdfkk

unftdfkk3#

发生这种情况的原因我们可以从live-server文档中看到:
服务器是一个简单的节点应用程序,为工作目录及其子目录提供服务。
如果指定的是文件而不是目录,或者目录中不包含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查看它所服务的目录之外的内容。
以下是实时服务器documentation,了解有关配置选项的更多信息

pcww981p

pcww981p4#

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

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

字符串
我不知道为什么,但这解决了它。
注意:在这个例子中我显示了引导路径,但同样的事情也适用于我的自定义css文件。

gj3fmq9x

gj3fmq9x5#

在VS代码中,右键单击style.css并选择“复制相对路径”,并将其粘贴到链接标签href=“style.css”,不要试图通过选择外部路径或手动类型链接,在现场为我工作,因为我正在寻找相同问题的解决方案,但我没有找到任何,只是尝试了这作为我睡觉前的最后一次尝试!!

ijnw1ujt

ijnw1ujt6#

我有这个问题,我得到了解决方案,从你管视频.无论如何,soution是不要把整个路径的css的链接.只要复制的css文件名一样“style.css”,并把它放在你的href.😉

hwazgwia

hwazgwia7#

在其他Web浏览器中尝试http://127.0.0.1:8080

在我的情况下,CSS突然停止加载我的默认Web浏览器。
它在所有其他浏览器中加载良好,包括Google Chrome和Mozilla Firefox。
我想要的Chromium浏览器是唯一失败的浏览器。
解决方案是在Chromium浏览器中创建新的用户配置文件。
默认情况下,失败的Web浏览器(具有错误的用户配置文件),以下是来自live-server的错误/失败消息:

Ready for changes
GET /css/style.css/ 404 4.933 ms - 153

字符串
x1c 0d1x的数据
诚然,最后一个正斜杠表示live-server将/css/style.css/视为一个目录而不是一个文件。不过,我的解决方案是确保我在默认浏览器中有一个好的/新的用户配置文件。

但你的情况不同

您的项目树如下所示:

.
├── home
│   └── index.html
├── package.json
└── styles.css


其中我忽略了package-lock.jsonnode_modules文件夹,沿着包含例如图像和/或JavaScript文件的任何其他文件夹。
像往常一样,我安装live-server globallynpm i live-server -g。然后,从命令行,我运行live-server,它在我的默认Web浏览器中打开http://127.0.0.1:8080。我可以确认你所报告的-这使浏览器显示我的文件夹结构,



并且只要我单击home目录,HTML文件就会显示 with CSS。
运行live-server --help,显示选项[--open=PATH]
运行live-server --open=home会打开http://127.0.0.1:8080/home/,同样使用 * CSS。
最后-在package.json中使用"scripts": { "start": "live-server --open=home" },,然后运行npm start- * 也 * 正确加载HTML和CSS。1
1是的-在package.json * 中有"scripts": { "start": "live-server home" },而没有 * --open=[PATH]子句,npm start打开http://127.0.0.1:8080 * 而没有 * /home/后缀。出于某种原因,我不太理解,它打开了index.html,我们知道 * 在home文件夹中-而不是在root目录中。

相关问题