我如何将 css 文件加载到 Django 中的 html

Question

I'm trying to create a Django app and i have made all the static settings like

Settings.py

STATICFILES_DIRS = [
    os.path.join(BASE_DIR,'CricketTeamManagement/static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = '/media/'

URLS.py

from django.conf import  settings
from django.conf.urls.static import static
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('Management.urls'))
] + static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)

I have also created a static folder in Main project folder and ran python manage.py collectstatic it created a new static folder outside and it has admin folder in it and sub folders like js,css,font,images and collectstatic collects the images and stores in this folder. I see static files are clearly working.

All the models.py imagefields are uploaded to media folders and even that works.

The Problem comes here

My css files are not taking its styles and not altering my html elements. If I have the below code in html file the styling works and if i separate it to a css folder and create a css file by removing style tag it is not working.

 <style> body { background-color: powderblue; } h1 { color: blue; } p { color: red; } </style>

when i saw the css file Not Found error it got fixed withto make html check the css file.

Unsure what is the issue. Thanks in Advance.

Update Project Format Link Tag in HTML

Answer 1

you have to link your css files this way in templates, also collectstatic command is not required during production stage only

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

Answer 2

The href in your index.html right now refers to yourwebsite/stylesheet.css. Django doesn't know where that URL is as you defined your static URL as "/static/". Static located in the STATIC_DIRS will be loaded under the URL yourwebsite/static/stylesheet.css. This is why you are getting the 404 on the CSS file.

Change your index.html to use Django built-in template tags to make it easier.

{% load static %}
Some code here.....
<link rel="stylesheet" type='text/css' href="{% static 'css/stylesheet.css' %}">

This will automatically generate the right url for your static file which should solve the problem.

You don't need to run collect static in development as django's server will take care of the static files. During production will will need to run collect static and point your reverse proxy or the like towards the static files.