实时服务器未加载 css 文件
Live-server not loading css file
我有一个 css 文件 link 使用我的 html 文件编辑。通过实时服务器加载 html 文件时,我的 css 无法正常工作。
css 在直接通过浏览器打开 html 文件时工作正常。我的 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,显示浏览器上的工作目录。我单击主目录,然后 html 文件与 css 一起加载。
当从终端输入 npm start 时,我的 html 文件在我的浏览器上加载正常,但由于某种原因 linked css 文件未加载。 css link 代码应该没问题,因为它在直接从浏览器打开时可以正常工作。 css 文件是否需要在同一目录中?
请检查 link 标签属性及其值是否拼写正确。 text\css 永远不会加载 css 文件。正确的是text/css(它是正斜杠)。也尝试从文件资源管理器打开 html 文件并检查它是否正常工作。
<link rel="stylesheet" type="text/css" href="style.css" />
我能够通过在 vscode 上重新安装实时服务器扩展来让它工作。希望这对您有所帮助!
在 VS Code 中,右键单击 style.css 和 select“复制相对路径”,并将其粘贴到 link 标签 href="style.css",不要尝试通过 select 外部路径或手动输入来 link,当我正在为同一问题寻找解决方案时当场为我工作,但我没有找到任何,试了这个作为我睡觉前的最后一次尝试!!
发生这种情况的原因我们可以从实时服务器文档中看到:
The server is a simple node app that serves the working directory and
its subdirectories.
如果指定的是文件而不是目录,或者目录中不包含live-server要加载的资源,则会导致404。但是在live-server的默认设置中,在如果出现 404 事件,它将默认尝试读取 index.html,这会导致 MIME 类型错误,它正在尝试为许多面临这种困惑的人加载“text/html”。
一般来说,在使用 live-server 时,请尝试创建一个 public 或 dist 目录来存放所有静态内容。这是一个示例目录结构,它将打字稿编译到 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 查看它正在服务的目录之外。
这里是 live-server documentation 有关配置选项的更多信息
我必须向实时服务器提供 CSS:
的完整路径
<link rel="stylesheet" type="text/css" href="http://localhost:8888/login/css/bootstrap.min.css" />
我不知道为什么,但这解决了它。
注意:在此处的示例中,我显示了 bootstrap 的路径,但同样的事情也适用于我的自定义 css 文件。
我遇到了问题,我从 you tube 视频中找到了解决方案。不管怎样,解决方案是不要将 css 的整个路径放在 link 中。只需复制 css 文件名,例如“style.css”,然后将其放入您的 href 中...很简单...
我有一个 css 文件 link 使用我的 html 文件编辑。通过实时服务器加载 html 文件时,我的 css 无法正常工作。
css 在直接通过浏览器打开 html 文件时工作正常。我的 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,显示浏览器上的工作目录。我单击主目录,然后 html 文件与 css 一起加载。
当从终端输入 npm start 时,我的 html 文件在我的浏览器上加载正常,但由于某种原因 linked css 文件未加载。 css link 代码应该没问题,因为它在直接从浏览器打开时可以正常工作。 css 文件是否需要在同一目录中?
请检查 link 标签属性及其值是否拼写正确。 text\css 永远不会加载 css 文件。正确的是text/css(它是正斜杠)。也尝试从文件资源管理器打开 html 文件并检查它是否正常工作。
<link rel="stylesheet" type="text/css" href="style.css" />
我能够通过在 vscode 上重新安装实时服务器扩展来让它工作。希望这对您有所帮助!
在 VS Code 中,右键单击 style.css 和 select“复制相对路径”,并将其粘贴到 link 标签 href="style.css",不要尝试通过 select 外部路径或手动输入来 link,当我正在为同一问题寻找解决方案时当场为我工作,但我没有找到任何,试了这个作为我睡觉前的最后一次尝试!!
发生这种情况的原因我们可以从实时服务器文档中看到:
The server is a simple node app that serves the working directory and its subdirectories.
如果指定的是文件而不是目录,或者目录中不包含live-server要加载的资源,则会导致404。但是在live-server的默认设置中,在如果出现 404 事件,它将默认尝试读取 index.html,这会导致 MIME 类型错误,它正在尝试为许多面临这种困惑的人加载“text/html”。
一般来说,在使用 live-server 时,请尝试创建一个 public 或 dist 目录来存放所有静态内容。这是一个示例目录结构,它将打字稿编译到 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 查看它正在服务的目录之外。
这里是 live-server documentation 有关配置选项的更多信息
我必须向实时服务器提供 CSS:
的完整路径<link rel="stylesheet" type="text/css" href="http://localhost:8888/login/css/bootstrap.min.css" />
我不知道为什么,但这解决了它。
注意:在此处的示例中,我显示了 bootstrap 的路径,但同样的事情也适用于我的自定义 css 文件。
我遇到了问题,我从 you tube 视频中找到了解决方案。不管怎样,解决方案是不要将 css 的整个路径放在 link 中。只需复制 css 文件名,例如“style.css”,然后将其放入您的 href 中...很简单...