Django无法在404页面上从应用程序应用CSS文件

汉娜：

的Django 3.0.8

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

该文件在那里，但是。

该特定的CSS文件位于两个位置：在应用程序目录中，并且也位于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
)

我已经尝试了许多不同的解决方案（例如摆脱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 %}

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")

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

├── 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

恢复莫妮卡：

为什么会出现错误：

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

设定：

的settings.STATIC_ROOT和settings.MEDIA_ROOT应该是包含您的静态和媒体文件，目录的名称不的绝对路径到这些目录。将它们更改为以下内容：

STATIC_ROOT = 'static'
MEDIA_ROOT = 'media'

为什么django找不到CSS文件：

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

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

    return [
        re_path(...)
    ]

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

TLDR；

使用它来创建您的urlpattern，而不是django的内置static函数：

import re
from django.urls import re_path
from django.views.static import serve


def static(prefix, **kwargs):
    pattern = r'^%s(?P<path>.*)$' % re.escape(prefix.lstrip('/'))
    return re_path(pattern, serve, kwargs=kwargs)


urlpatterns = [

    ...

    static(settings.STATIC_URL, document_root=settings.STATIC_ROOT),
    static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT),
]

免责声明：此功能基本上与中的功能相同django.conf.urls.static，没有DEBUG=False限制。

更新资料

如注释中所指出的，您可以manage.py runserver --insecure代替编写自定义static函数。

感谢Dmitry Shevchenko。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-08-7

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章