未找到与 HTML 位于同一文件夹中的 CSS 文件答案

【问题标题】：CSS file in same folder as HTML not found未找到与 HTML 位于同一文件夹中的 CSS 文件
【发布时间】：2020-08-22 03:50:35
【问题描述】：

这是一个非常基本的问题，但过去一周我一直在努力解决这个问题。我刚开始将 CSS 添加到我的项目中，并将 base_style.css 链接到 base.html。由于某种原因，服务器找不到 base_style.css。

Base.html：

<head>
    <title> Chat </title>
    <link href = "base_style.css" type = "text/css" rel = "stylesheet">
    
</head>

base_style.css：

h1 {
    text-align: center;
}

但是，当我通过命令提示符运行服务器时，我得到：

[21/Aug/2020 23:35:25] "GET / HTTP/1.1" 200 517
Not Found: /base_style.css
[21/Aug/2020 23:35:25] "GET /base_style.css HTTP/1.1" 404 5153

即使通过base_style.css和base.html都在同一个文件夹/目录中：

08/18/2020  07:48 PM    <DIR>          .
08/18/2020  07:48 PM    <DIR>          ..
08/21/2020  11:24 PM               584 base.html
08/21/2020  11:24 PM                51 base_style.css
08/17/2020  12:05 AM               622 chatroom.html
08/13/2020  05:03 PM               418 chatrooms.html
08/15/2020  09:53 PM               376 edit_message.html
08/13/2020  05:00 PM               295 index.html
08/13/2020  05:06 PM               272 new_chatroom.html
08/14/2020  04:00 PM               378 new_message.html
               8 File(s)          2,996 bytes
               2 Dir(s)  417,867,866,112 bytes free

如果有人知道发生了什么，我很感激任何帮助。

【问题讨论】：

你用什么服务器运行这个？
我在命令提示符终端上运行它，只使用 python manage.py runserver，然后在 chrome 上打开 127.0.0.1:8000。我也试过通过heroku运行它，它也没有工作（但没有错误消息）

标签： html css web get

【解决方案1】：

尝试使用相对路径：

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

【讨论】：

我试过了，但我仍然收到同样的错误：未找到：/base_style.css
上面的答案似乎是正确的。我通常建议按此顺序放置标签。我会在没有 type 属性的情况下尝试它，也许尝试另一个浏览器。

【解决方案2】：

从server 运行应用程序时，您需要从root directory 指定路径

如果文件夹结构是这样的：web-app > public > base_style.css

那么路径将是public/base_style.css

因此：

<link href=`public/base_style.css` type=`text/css` rel = `stylesheet`>

从你的根文件夹指定路径，它将起作用:)

【讨论】：

桌面的完整路径是：“Desktop/project2/chat/chat_app/templates/chat_app/base_style.css”。我已经尝试过：“chat/chat_app/templates/chat_app/base_style.css”、“chat_app/templates/chat_app/base_style.css”、“templates/chat_app/base_style.css”、“chat_app/base_style.css”并且没有他们的工作？很迷茫。感谢您的帮助，谢谢！
您从哪个文件夹运行服务器？在我的示例中，web-app 文件夹有 server.js，它会启动服务器
导航到“Desktop/project2/chat”后，我在命令提示符中输入：“python manage.py runserver”来运行服务器

【解决方案3】：

要在服务器调用的 HTML 代码中添加 CSS 文件，您必须从项目的基本目录开始路径。

应该是这样的：

<head>
    <title> Chat </title>
    <link href = "<path from project base dir to current dir>/base_style.css" type = "text/css" rel = "stylesheet">
    
</head>

【讨论】：

桌面的完整路径是：“Desktop/project2/chat/chat_app/templates/chat_app/base_style.css”。我已经尝试过：“chat/chat_app/templates/chat_app/base_style.css”、“chat_app/templates/chat_app/base_style.css”、“templates/chat_app/base_style.css”、“chat_app/base_style.css”并且没有他们的工作？很迷茫。感谢您的帮助，谢谢！
尝试将路径添加为“project2/chat/chat_app/templates/chat_app/base_style.css”。这很可能会起作用。