在 Chrome 开发工具中找不到 404 错误 CSS 文件答案

【问题标题】：404 error CSS file not found in chrome dev tools在 Chrome 开发工具中找不到 404 错误 CSS 文件
【发布时间】：2015-05-03 10:34:24
【问题描述】：

我已经花了一个半小时阅读有关此问题的其他帖子，但仍未解决。我相信该文件位于正确的位置，并且文件路径引用是适当的。我正在本地测试我的 Web 应用程序，试图对其进行一些样式化，而 chrome 开发工具说找不到 CSS 文件。我正在使用 Python、Google App Engine 和 Jinja2。 Check out the error 如果您愿意，可以自己使用。提前感谢您的时间和专业知识！

这是我的 HTML 文件。第二个继承自第一个。

base.html

<!DOCTYPE html>
<html>
<head>

  <title>Chores</title>
  <link rel="stylesheet" href="static/style.css" type="text/css" />
</head>

<body>
  <a href="/" class="main-title">
    Chores
  </a>

  <div id="content">
  {% block content %}
  {% endblock %}
  </div>
</body>

</html>

front.html

{% extends "base.html" %}

{% block content %}

  <br>
  <br>
  <a href="/dochore">Do Chore</a>
  &nbsp;
  <a href="/addchore"> + Add Chore</a>
  &nbsp;
  <a href="/removechore"> - Remove Chore</a>
  &nbsp;
  <a href="/choredetail">Chore Details</a>
  <br>
  <br>
  <br>

  {% for chore in chores %}
    {{ chore.render() | safe }}
    <br><br>
  {% endfor %}

{% endblock %}

我的项目目录的结构类似于...

project-name/
  main.py
  templates/
    HTML files
  static/
    style.css

这是我的 app.yaml...

application: chorestimemadison
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico

- url: .*
  script: main.app

libraries:
- name: webapp2
  version: "2.5.2"
- name: jinja2
  version: latest

【问题讨论】：

您可以发布您的 app.yaml 处理程序吗？在我看来，静态目录可能没有正确设置。
后续问题为我的回答添加一些细节：您使用的是 Apache、nginx 还是 IIS？
@JoshuaWhitley 我没有使用你刚才提到的这三种技术中的任何一种。
@JulianDavid 您使用的是什么网络服务器？您是否肯定将此网站的根目录设置为 /project-name？因为这绝对是一个访问/权限问题。
@JoshuaWhitley 我正在为 python 使用谷歌应用引擎。嗯，项目文件夹位于我桌面上的一个文件夹中。例如桌面 > some_folder > project_folder

标签： html css google-chrome google-app-engine jinja2

【解决方案1】：

我打赌您在目录访问方面遇到了问题。如果您的 HTML 文件位于模板文件夹下，并且您的模板文件夹是作为 http://chorestimemadison.appspot.com/ 提供服务的位置，那么无论您使用什么 URL，HTML 文件都无法访问静态文件夹（或其中的 CSS 文件），因为它们是不是 Web 服务器目录结构的一部分。

您必须：

将静态文件夹移动到模板文件夹中。
将 Web 服务器的根目录更改为项目名称而不是模板，并将 style.css 的引用更改为 ../static/style.css。

【讨论】：

【解决方案2】：

由于您的 css 和 html 文件位于并行文件夹中，您首先需要使用“../”退出 1 个目录，然后像这样输入您的 css 路径

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

您输入的方式是在模板/静态中查找您的 css，因为模板是您当前的文件夹（执行 html 的位置）

【讨论】：

他无法升级，因为正在提供的 html 文件位于他的虚拟目录结构的根目录中。详情见我的回答。
这不是屋顶，因为屋顶是项目名称，模板和静态都是子目录
Ivan，我已经尝试过了，不幸的是它没有用:(
您能否将您的“静态”文件夹移动到“模板”文件夹中，以查看您是否可以实际访问此 css 文件？当您链接到 href="./static/style.css" 等文件时，还要添加“./”。这是个好习惯

【解决方案3】：

您缺少静态目录的处理程序：

handlers:
- url: /favicon\.ico
  static_files: favicon.ico
  upload: favicon\.ico
- url: /static
  static_dir: static
- url: .*
  script: main.app

Learn more about why this is necessary.

【讨论】：

我认为这会解决它，但它没有:(
那么还有其他问题。对你来说，现在还处于开发的早期阶段，所以为什么不尝试一步一步地做 [链接] 教程，应该只需要几分钟，到最后你会正确设置一切:)
成功了！显然，订单很重要，因为我在 app.yaml 中的主 url 之后列出了静态 url，但它不起作用，但是一旦我将它切换为首先使用静态的，它就起作用了。非常感谢。

【解决方案4】：

使用“./”代替“/”。它有助于获取当前目录。在你的情况下，代码应该是：

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

【讨论】：