CSS静态文件未在Django中加载

Posted 2023-02-24

【中文标题】CSS静态文件未在Django中加载

【英文标题】：CSS static file is not loading in Django

【发布时间】：2020-04-28 11:38:16

【问题描述】：

我正在学习 Django，并尝试实现一个博客应用程序。我在使用项目中的静态文件时遇到错误。我知道，有很多同名的问题。但是我尝试了各种方法，仍然没有在浏览器上呈现css文件。

文件夹结构：

firstBlog 是项目名称。 blog 是 firstBlog 中的应用。 allstaticfiles 是 STATIC_ROOT 位置。 static 是用于存储静态内容的文件夹。 模板用于存储相应应用的模板。

这是我的一些代码：

settings.py

STATIC_URL = '/static_files/'

STATICFILES_DIRS = [
     os.path.join(BASE_DIR, "static"),
     '/Django/projects/project1/project1/firstBlog/static',
]
#print(os.path.exists(os.path.join(BASE_DIR,'static'))) ----------------TRUE

STATIC_ROOT=os.path.join(BASE_DIR, "allstaticfiles")

Base.html

我使用了 % load static % 并且为了加载 css，我将 href 属性设置如下。

<link rel="stylesheet" type="text/css" href="% static 'blog/main.css' % ">

需要考虑的几件事：

当我在浏览器上查看我的页面时，它在控制台上显示错误，这可能是由于某些路径问题。

127.0.0.1/:1 拒绝应用来自 'http://127.0.0.1:8000/blog/%7B%%20static%20'blog/main.css'%20%%20%7D' 的样式 因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并启用严格的 MIME 检查。

当我从 localhost 链接（即http://127.0.0.1:8000/blog/static_files/blog/main.css）查看样式时，它正在工作。

当我检查页面的视图源然后单击 href 链接时，它没有加载 css 文件。

文件夹结构： C:\Users\tedd\OneDrive\Django\projects\project1\project1\firstBlog\static

【参考方案1】：

注意这一点：在本地保存Debug = False 可能会导致css 无法加载的错误。更改 Debug = True 以使用 django 在本地运行您的 css。

【参考方案2】：

我会尽力提供帮助，但我不是专家！

http://127.0.0.1:8000/blog/static_files/blog/main.css 工作的原因是因为您正在直接访问 main.css 文件。我会假设您的 <link rel="stylesheet" type="text/css" href="% static 'blog/main.css' % "> 没有指向正确的目录。

我查看了文档，您的文件夹结构似乎没有以正确的方式形成。以下是所有内容的结构模板：

[projectname]/                  <- project root
├── [projectname]/              <- Django root
│   ├── __init__.py
│   ├── settings/
│   │   ├── common.py
│   │   ├── development.py
│   │   ├── i18n.py
│   │   ├── __init__.py
│   │   └── production.py
│   ├── urls.py
│   └── wsgi.py
├── apps/
│   └── __init__.py
├── configs/
│   ├── apache2_vhost.sample
│   └── README
├── doc/
│   ├── Makefile
│   └── source/
│       └── *snap*
├── manage.py
├── README.rst
├── run/
│   ├── media/
│   │   └── README
│   ├── README
│   └── static/
│       └── README
├── static/
│   └── README
└── templates/
    ├── base.html
    ├── core
    │   └── login.html
    └── README

在您提供的屏幕截图中，您的模板文件夹看起来好像位于 django 根目录而不是项目根目录中。这很重要，因为它会在错误的位置搜索您的 .css。

我鼓励您尝试修复目录，然后不要使用href="% static 'blog/main.css' % ">，而只需使用href="css/style.css"。

请注意它是 css/style.css 而不是 style.css。在您的模板文件夹中，您可以创建一个名为 css 的文件夹，然后将所有 .css 文件存储在其中。然后您可以简单地使用 href="css/style.css" 指向 css 文件夹。

这应该作为一个临时解决方案，直到更有知识的人可以给你正确的答案。

编辑： 您的 base.html 也应该在模板文件夹中！所以：project_root/templates（在此处插入 base.html）/css/（在此处插入您的 .css（

【讨论】：

我不会放弃 % static % 模板标签。 DEBUG=False 时必须将其部署到生产环境怎么样？