404 错误 CSS 在 chrome 开发工具中找不到文件

Question

我已经花了一个半小时阅读其他关于这个问题的帖子，但仍然没有解决。我相信该文件位于正确的位置并且文件路径参考是合适的。我正在本地测试我的 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

Answer 1

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

您必须：

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

Answer 2

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

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

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

Answer 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.

Answer 4

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

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

404 错误 CSS 在 chrome 开发工具中找不到文件

404 error CSS file not found in chrome dev tools

html

css

google-app-engine

google-chrome

jinja2