Django 未在 404 页面上应用来自应用程序的 CSS 文件

Question

Django 未在 404 页面上应用来自应用程序的 CSS 文件

Han*_*nny 4 html css python django django-templates

Django 3.0.8

蟒蛇 3.7.x

我有一个带有一些应用程序的 Django 项目。我正在尝试为 400、403、404、500 错误创建一些“默认”错误页面。我已经完成并显示了适当的模板 - 但没有任何样式或 JS。

在 404 错误页面中，我尝试从其中一个应用程序链接到 CSS，以便应用正确的样式 - 但在控制台中，我看到此错误：

Refused to apply style from 'http://127.0.0.1:8000/static/launcher/dist/css/launcher.css' because of its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Run Code Online (Sandbox Code Playgroud)

但是，该文件存在于那里。

这个特定的 CSS 文件位于两个位置：在 app 目录中，它也位于 STATIC_ROOT 中，因为我运行了该python manage.py collectstatic命令。

STATIC_URL 设置为 /static/

CSS 文件位于：

project_dir/launcher/static/launcher/dist/css/launcher.css
project_dir/static/launcher/dist/css/launcher.css

我的 404 模板位于：

project_dir/templates/404.html

我的 CSS 链接如下所示：

<link rel="stylesheet" type="text/css" href="{% static 'launcher/dist/css/launcher.css' %}" />

我的项目网址如下所示：

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("launcher.urls")),
    path("app2/", include("app2.urls")),
    path("app3/", include("app3.urls")),
    path(
        "robots.txt",
        TemplateView.as_view(
            template_name="robots.txt", content_type="text/plain"
        ),
    ),
    path(
        "favicon.ico",
        RedirectView.as_view(
            url=staticfiles_storage.url("favicon.ico"), permanent=False
        ),
        name="favicon",
    ),
]
urlpatterns += static(
    settings.MEDIA_URL, document_root=settings.MEDIA_ROOT
)
urlpatterns += static(
    settings.STATIC_URL, document_root=settings.STATIC_ROOT
)

Run Code Online (Sandbox Code Playgroud)

我尝试了很多不同的解决方案（例如删除 CSS 中的注释或更改 HTML 链接中的类型），但到目前为止没有任何效果。

实现这一目标的最佳方法是什么？

编辑添加：我的 404.html 页面如下所示：

{% extends 'error_base.html' %}
{% load static %}

{% block css_imports %}
    <link rel="stylesheet" type="text/css" href="{%  static 'launcher/dist/css/launcher.css' %}" />
{% endblock %}

{% block script_imports %}
    <script src="{% static 'launcher/dist/js/vendors~main.f11c6fb90f8f72673956.js' %}"></script>
    <script src="{% static 'launcher/dist/js/main.dce999efa12cf745c86d.js' %}"></script>
{% endblock %}

{% block content %}
    <h1>Whoops!</h1>
    404
    <h3>We are having some issue finding that particular item.</h3>
    <p>If you feel this was due to an error - please contact us!
    </p>
{% endblock %}

Run Code Online (Sandbox Code Playgroud)

JS 文件也给出 404 错误，但我想一旦我找到了 CSS 问题的原因，我也可以找出 JS 问题。'error_base.html' 文件本质上是一个样板 HTML 文件，在 404.html 页面中列出的块的适当位置具有适当的块。

附加编辑添加：

我的静态文件设置如下所示：

# Static files (CSS, JavaScript, Images)
STATIC_URL = "/static/"

STATIC_ROOT = os.path.join(BASE_DIR, "static")
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'launcher/static/'),
    os.path.join(BASE_DIR, 'app1/static/'),
    os.path.join(BASE_DIR, 'app2/static/'),
]

# Media files 
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

Run Code Online (Sandbox Code Playgroud)

编辑添加：树结构如下所示：

??? README.md
??? project_dir
?   ??? __init__.py
?   ??? context_processors.py
?   ??? settings.py
?   ??? unit-test-settings.py
?   ??? urls.py
?   ??? utils.py
?   ??? wsgi.py
??? geckodriver.log
??? app_1
   ??? static
   ?   ??? app_1
   ?       ??? dist
   ?       ?   ??? css
   ?       ?   ?   ??? app_1.css
   ?       ?   ??? js
   ?       ?       ??? main.f3eaca15a899d1a9d4e4.js
   ?       ?       ??? vendors~main.48489b4c92919034fc8f.js
   ?       ??? fa-grav.png
   ?       ??? grav.png
   ?       ??? grav_30.png
   ?       ??? src
   ?           ??? css
   ?           ?   ??? style.css
   ?           ??? html
   ?           ?   ??? webpack_bundles.html
   ?           ??? js
   ?           ?   ??? index.js
   ?           ?   ??? indellis_form.js
   ?           ??? scss
   ?               ??? app_1.scss
   ?? ....other standard app files
??? app_2
   ??? static
   ?   ??? app_2
   ?       ??? dist
   ?       ?   ??? css
   ?       ?   ?   ??? app_2.css
   ?       ?   ??? js
   ?       ?       ??? main.cedd2abecaa899d1a9d4e4.js
   ?       ?       ??? vendors~main.48325ceds92919034fc8f.js
   ?       ??? fa-grav.png
   ?       ??? grav.png
   ?       ??? grav_30.png
   ?       ??? src
   ?           ??? css
   ?           ?   ??? style.css
   ?           ??? html
   ?           ?   ??? webpack_bundles.html
   ?           ??? js
   ?           ?   ??? index.js
   ?           ?   ??? registration_form.js
   ?           ??? scss
   ?               ??? app_2.scss
   ?? ....other standard app files
??? launcher
?   ??? static
?   ?   ??? launcher
?   ?       ??? dist
?   ?       ?   ??? css
?   ?       ?   ?   ??? launcher.css
?   ?       ?   ??? js
?   ?       ?       ??? main.75ef788b0aea38c3c71b.js
?   ?       ?       ??? vendors~main.d806da1f66faa822a6ef.js
?   ?       ??? src
?   ?           ??? css
?   ?           ?   ??? style.css
?   ?           ??? html
?   ?           ?   ??? webpack_bundles.html
?   ?           ??? js
?   ?           ?   ??? index.js
?   ?           ??? scss
?   ?               ??? launcher.scss
   ?? ....other standard app files
??? manage.py
??? pyproject.toml
??? pytest.ini
??? requirements.txt
??? setup.cfg
??? static
?   ??? app_1
?   ?   ??? dist
?   ?   ?   ??? css
?   ?   ?   ?   ??? app_1.css
?   ?   ?   ??? js
?   ?   ?       ??? main.f3eaca15a899d1a9d4e4.js
?   ?   ?       ??? vendors~main.48489b4c92919034fc8f.js
?   ?   ??? fa-grav.png
?   ?   ??? grav.png
?   ?   ??? grav_30.png
?   ?   ??? src
?   ?       ??? css
?   ?       ?   ??? style.css
?   ?       ??? html
?   ?       ?   ??? webpack_bundles.html
?   ?       ??? js
?   ?       ?   ??? index.js
?   ?       ?   ??? indellis_form.js
?   ?       ??? scss
?   ?           ??? app_1.scss
?   ??? project_dir
?   ?   ??? favicon.ico
?   ?   ??? icons
?   ?   ?   ??? android-chrome-144x144.png
?   ?   ?   ??? apple-touch-icon-120x120-precomposed.png
?   ?   ?   ??? apple-touch-icon-120x120.png
?   ?   ?   ??? apple-touch-icon-152x152-precomposed.png
?   ?   ?   ??? apple-touch-icon-152x152.png
?   ?   ?   ??? apple-touch-icon-180x180-precomposed.png
?   ?   ?   ??? apple-touch-icon-180x180.png
?   ?   ?   ??? apple-touch-icon-60x60-precomposed.png
?   ?   ?   ??? apple-touch-icon-60x60.png
?   ?   ?   ??? apple-touch-icon-76x76-precomposed.png
?   ?   ?   ??? apple-touch-icon-76x76.png
?   ?   ?   ??? apple-touch-icon-precomposed.png
?   ?   ?   ??? apple-touch-icon.png
?   ?   ?   ??? browserconfig.xml
?   ?   ?   ??? favicon-16x16.png
?   ?   ?   ??? favicon-32x32.png
?   ?   ?   ??? mstile-144x144.png
?   ?   ?   ??? mstile-150x150.png
?   ?   ?   ??? safari-pinned-tab.svg
?   ?   ?   ??? site.webmanifest
?   ?   ??? proj_icon.ico
?   ??? launcher
?   ?   ??? dist
?   ?   ?   ??? css
?   ?   ?   ?   ??? launcher.css
?   ?   ?   ??? js
?   ?   ?       ??? main.75ef788b0aea38c3c71b.js
?   ?   ?       ??? vendors~main.d806da1f66faa822a6ef.js
?   ?   ??? src
?   ?       ??? css
?   ?       ?   ??? style.css
?   ?       ??? html
?   ?       ?   ??? webpack_bundles.html
?   ?       ??? js
?   ?       ?   ??? index.js
?   ?       ??? scss
?   ?           ??? launcher.scss
?   ??? app_2
?   ?   ??? dist
?   ?   ?   ??? css
?   ?   ?   ?   ??? app_2.css
?   ?   ?   ??? js
?   ?   ?       ??? main.cedd2abecaa899d1a9d4e4.js
?   ?   ?       ??? vendors~main.48325ceds92919034fc8f.js
?   ?   ??? fa-pdf.png
?   ?   ??? id_card_30.png
?   ?   ??? rc-u.png
?   ?   ??? rg.png
?   ?   ??? src
?   ?       ??? css
?   ?       ?   ??? style.css
?   ?       ??? html
?   ?       ?   ??? webpack_bundles.html
?   ?       ??? js
?   ?       ?   ??? index.js
?   ?       ??? scss
?   ?           ??? app_2.scss
??? templates
?   ??? 400.html
?   ??? 403.html
?   ??? 404.html
?   ??? 500.html
?   ??? base.html
?   ??? error_base.html
?   ??? robots.txt

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rei*_*ica 7

域名注册地址：

如果要DEBUG=False使用本地开发服务器提供静态文件，则需要使用以下--insecure标志：

python manage.py runserver --insecure

Run Code Online (Sandbox Code Playgroud)

为什么会出现错误：

每次在浏览器中呈现 html 时，都会在后台发出请求以获取每个静态文件。因此，在您的情况下，404.html模板告诉您的浏览器 fetch http://127.0.0.1:8000/static/launcher/dist/css/launcher.css。如果您的 django 服务器不知道该文件在哪里，它将以404.html模板而不是 css响应，后者的 MIME 类型为text/html, 而不是text/css，因此您的错误。

为什么 django 找不到 css 文件：

如果您查看您在中static调用的函数的源代码urls.py，它看起来像这样：

from django.conf.urls.static import static

def static(...):
    if not settings.DEBUG:
        return []

    return [
        re_path(...)
    ]

Run Code Online (Sandbox Code Playgroud)

这意味着re_path用于呈现静态文件的不再存在，因为您已设置DEBUG=False测试404.html模板...

归功于Dmitry Shevchenko的捷径。

归档时间：	5 年，9 月前
查看次数：	1376 次
最近记录：	5 年，6 月前