Django 中未加載 CSS 靜態文件

Question

我正在學習 Django，我試圖實現一個博客應用程序。 我在項目中使用靜態文件時遇到錯誤。我知道，有很多相同標題的問題。 但是我嘗試了各種方法，仍然沒有在瀏覽器上渲染 css 文件。

文件夾結構：

firstBlog是項目名稱。 blog是 firstBlog 中的應用程序。 allstaticfiles是 STATIC_ROOT 位置。 static是存放靜態內容的文件夾。 用於存儲相應應用程序模板的模板。

這是我的一些代碼：

設置.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")

基礎.html

我使用了{% load static %}並且為了加載 css，我設置了 href 屬性如下。

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

需要考慮的幾件事：

1. 當我在瀏覽器上查看我的頁面時，它在控制台上給我錯誤，這可能是由於某些路徑問題。

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 檢查。

2. 當我從本地主機鏈接查看樣式時，即http://127.0.0.1:8000/blog/static_files/blog/main.css ，它的工作。

3. 當我檢查頁面的視圖源然后單擊 href 鏈接時，它沒有加載 css 文件。

4. 文件夾結構： C:\Users\tedd\OneDrive\Django\projects\project1\project1\firstBlog\static

Answer 1

我會盡力提供幫助，但我不是專家！

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（

Answer 2

請注意這一點：在本地保持Debug = False可能會導致 css 未加載錯誤。 更改Debug = True以使用 django 在本地運行您的 css。

Answer 3

“whitenoise”可以解決“MIME type”錯誤，然后加載CSS ：

首先，安裝“whitenoise” ：

pip install whitenoise

然后，將其添加到“settings.py”中的“MIDDLEWARE ”。 而已。 最后，加載CSS ：

MIDDLEWARE = [
    # ...
    "django.middleware.security.SecurityMiddleware",
    "whitenoise.middleware.WhiteNoiseMiddleware", # Here
    # ...
]

Answer 4

whitenoise可以解決MIME 類型錯誤然后加載 CSS：

首先，安裝whitenoise ：

pip install whitenoise

然后，將其添加到settings.py中的MIDDLEWARE中。 而已。

最后，加載 CSS：

MIDDLEWARE = [
               # ...
               "django.middleware.security.SecurityMiddleware",
               "whitenoise.middleware.WhiteNoiseMiddleware", # Here
                # ...
             ]