我有一个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文件需要在同一个目录下吗?
7条答案
按热度按时间fsi0uk1n1#
请检查链接标签属性及其值是否拼写正确。text\css将永远不会加载css文件。正确的是text/css(它是 * 正斜杠 *)。同时尝试从文件资源管理器打开html文件并检查它是否工作。
字符串
qnzebej02#
我可以通过在vscode上重新安装live server扩展来让它工作。希望这能有所帮助!
unftdfkk3#
发生这种情况的原因我们可以从live-server文档中看到:
服务器是一个简单的节点应用程序,为工作目录及其子目录提供服务。
如果指定的是文件而不是目录,或者目录中不包含live-server要加载的资源,则会导致404。然而,在live-server的默认设置中,在404事件中,它将默认尝试读取index.html,这会导致MIME类型错误,即它正在尝试加载“text/html”。
一般来说,在使用live-server时,尝试创建一个public或dist目录,用于存放所有静态内容。下面是一个示例目录结构,它将typescript编译到dist/js目录,将sass编译到dist/css目录:
字符串
然后可以运行“live-server dist”--关键因素是我没有要求live-server查看它所服务的目录之外的内容。
以下是实时服务器documentation,了解有关配置选项的更多信息
pcww981p4#
我必须向live-server提供我的CSS的完整路径:
字符串
我不知道为什么,但这解决了它。
注意:在这个例子中我显示了引导路径,但同样的事情也适用于我的自定义css文件。
gj3fmq9x5#
在VS代码中,右键单击style.css并选择“复制相对路径”,并将其粘贴到链接标签href=“style.css”,不要试图通过选择外部路径或手动类型链接,在现场为我工作,因为我正在寻找相同问题的解决方案,但我没有找到任何,只是尝试了这作为我睡觉前的最后一次尝试!!
ijnw1ujt6#
我有这个问题,我得到了解决方案,从你管视频.无论如何,soution是不要把整个路径的css的链接.只要复制的css文件名一样“style.css”,并把它放在你的href.😉
hwazgwia7#
在其他Web浏览器中尝试http://127.0.0.1:8080!
在我的情况下,CSS突然停止加载我的默认Web浏览器。
它在所有其他浏览器中加载良好,包括Google Chrome和Mozilla Firefox。
我想要的Chromium浏览器是唯一失败的浏览器。
解决方案是在Chromium浏览器中创建新的用户配置文件。
默认情况下,失败的Web浏览器(具有错误的用户配置文件),以下是来自live-server的错误/失败消息:
字符串
x1c 0d1x的数据
诚然,最后一个正斜杠表示live-server将
/css/style.css/
视为一个目录而不是一个文件。不过,我的解决方案是确保我在默认浏览器中有一个好的/新的用户配置文件。但你的情况不同
您的项目树如下所示:
型
其中我忽略了
package-lock.json
和node_modules
文件夹,沿着包含例如图像和/或JavaScript文件的任何其他文件夹。像往常一样,我安装live-server globally,
npm 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。11是的-在package.json * 中有
"scripts": { "start": "live-server home" },
而没有 *--open=[PATH]
子句,npm start
打开http://127.0.0.1:8080 * 而没有 */home/
后缀。出于某种原因,我不太理解,它打开了index.html
,我们知道 * 在home
文件夹中-而不是在root
目录中。