Django无法在404页面上从应用程序应用CSS文件 [英] Django Not Applying CSS File From App on 404 Page
问题描述
Django 3.0.8
Django 3.0.8
Python 3.7.x
Python 3.7.x
我有一个带有一些应用程序的Django项目.我正在尝试制作一些默认"错误页面，以解决400、403、404、500错误.我已经做到了，并显示了适当的模板-但没有任何样式或JS.
I've got a Django project with a few apps. I'm trying to make some 'default' error pages for like 400, 403, 404, 500 errors. I've done that and the appropriate templates display - but without any styling or JS.
在404错误页面中，我试图从一个应用程序链接到CSS，以便应用正确的样式-但在控制台中，我看到此错误:
In the 404 error page, I'm trying to link to the CSS from one of the apps so the correct styling gets applied - but in the console, I see this error:
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 命令.
That particular CSS file lives in two places: in the app directory and it also lives in the STATIC_ROOT because I ran the python manage.py collectstatic command.
STATIC_URL设置为/static/
The STATIC_URL is set to /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的链接如下:
My link to the CSS looks like this:
< link rel =样式表"；type ="text/css"href =" {％static'launcher/dist/css/launcher.css'％}'"/>
我的项目URL如下:
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链接中的类型)，但到目前为止没有任何效果.
I've tried a lot of different solutions (like getting rid of comments in the CSS or changing the type in the HTML link) but nothing has worked thus far.
完成此任务的最佳方法是什么?
What is the best way to accomplish this?
要添加:我的404.html页面如下:
EDIT TO ADD: My 404.html page looks like this:
{% 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页面中列出的块的适当位置带有适当的块.
The JS files give 404 errors as well, but I figure once I find out the cause of the CSS issues, I can figure out the JS issues as well. The 'error_base.html' file is essentially a boilerplate HTML file with the appropriate blocks in the appropriate spots for the blocks listed in the 404.html page.
要添加的其他
我的静态文件设置如下:
My static files settings look like this:
# 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")
要添加:树形结构如下:
EDIT TO ADD: Tree structure looks like this:
├── 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
推荐答案
TLDR:
如果要使用本地开发服务器通过 DEBUG = False 提供静态文件，则需要使用 -不安全 标志:
TLDR:
If you want to serve static files with DEBUG=False using a local development server, you need to use the --insecure flag:
python manage.py runserver --insecure
为什么会出现错误:
每次在浏览器中呈现html时，都会在后台请求获取每个静态文件.因此，在您的情况下， 404.html 模板告诉您的浏览器获取 http://127.0.0.1:8000/static/launcher/dist/css/launcher.css .如果您的django服务器不知道该文件在哪里，它将使用 404.html 模板而不是css响应，该模板的MIME类型为 text/html ，而不是 text/css ，因此出现了错误.
Why you get the error:
Every time you render html in your browser, behind the scenes a request is made to fetch each of your static files. So in your case, the 404.html template is telling your browser to fetch http://127.0.0.1:8000/static/launcher/dist/css/launcher.css. If your django server doesn't know where that file is, it will respond with the 404.html template instead of the css, which has a MIME type of text/html, and not text/css, hence your error.
如果您查看在 urls.py 中调用的 static 函数的源代码，则看起来像这样:
If you look at the source code for the static function that you call in your urls.py, it looks something like this:
from django.conf.urls.static import static
def static(...):
if not settings.DEBUG:
return []
return [
re_path(...)
]
这意味着用于呈现静态文件的 re_path 不再存在，因为您设置了 DEBUG = False 测试您的 404.html 模板...
Which means that the re_path that is used to render static files, is no longer there, since you set DEBUG=False to test your 404.html template...
使用德米特里·舍甫琴科作为快捷方式.
这篇关于Django无法在404页面上从应用程序应用CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
