static file css not loading in django

Question

I have tried everything i know to fix this all static files are working perfectly other than css

views.py

from django.http.response import HttpResponse
from django.shortcuts import render

def index(response):
    return render(response , "main/index.html")

html head

{% extends 'main/base.html' %}
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href= "{%static "main/css/index.css" %}">

    <title> Home Page   </title>
</head>

Please note that i am using bootstrap in base file if that affects anything

settings.py


STATIC_URL = '/static/'

STATIC_ROOT = "/Users/aryankaushik/Desktop/visual studio code /django/assets"


STATICFILES_DIRS = [
    BASE_DIR / "static",
]

project directory

├── admin.py
├── apps.py
├── migrations
│   ├── __init__.py
│   └── __pycache__
│       └── __init__.cpython-39.pyc
├── models.py
├── static
│   └── main
│       ├── css
│       │   ├── base.css
│       │   └── index.css
│       ├── img
│       │   ├── electronics.jpeg
│       │   ├── furniture.jpeg
│       │   └── nature.jpeg
│       └── js
│           └── index.js
├── templates
│   └── main
│       ├── base.html
│       ├── contact.html
│       └── index.html
├── tests.py
├── urls.py
└── views.py

I am sure the folders paths are correct as images are rendering correctly..

Thank you in advance

score 0 · Answer 1 · answered Dec 17 '21 at 11:34

Bro try adding these:

Setting.py:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STA_DIR = os.path.join(BASE_DIR,'static')
STATIC_URL = '/static/'

STATICFILES_DIRS = [
    STA_DIR,
]


Urls.py:

urlpatterns = [
    path('',views.index3,name='index'),
]

View.py:

def index3(request):
    my_dict ={'insert_me':'hello i m views.py and now i m under template/firstone'} 
    return render(request,'firstone/index.html',context=my_dict) 

Index.html:

    <title>Document</title>
    <link rel="stylesheet" href="{% static "css/style.css" %}">
</head>
<body>
    <h1>Hello there Index.HTML here</h1>
    <!-- {{insert_me}} -->
    <img src="{% static "images/kami.jpeg" %}" alt="oh no">

this is not it images are working fine css not works even in head tag only works in inline css — Aryan Kaushik, Dec 17 '21 at 16:05

score 0 · Answer 2 · answered Dec 17 '21 at 11:37

on your settings.py you can place them for your any project this work dynamicly

STATIC_URL = "/static/"
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")

MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")

STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

your version on html: mistake

<link rel="stylesheet" href= "{%static "main/css/index.css" %}">

True version:

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

don't use similar quotes it doesn't work

i tried the true version it didn't work i even tried to write css in head tag it still doesn't work. It only works when i use inline css — Aryan Kaushik, Dec 17 '21 at 15:56

score 0 · Answer 3 · answered Dec 17 '21 at 13:26

Try it.

settings.py

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'static'
STATICFILES_DIRS = [
    BASE_DIR / 'project/static'
]

MEDIA_ROOT = BASE_DIR / 'media'
MEDIA_URL = '/media/'

views.py

def index(request):
    dict = {'test':'test2'}
    return render(request , "main/index.html", context=dict)

index.html

{% extends 'base.html' %}

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href= "{% static 'index.css' %}">

    <title>Index.html</title>
</head>


urls.py

urlpatterns = [
    path('',views.index,name='index'),
]

score 0 · Answer 4 · answered Dec 17 '21 at 17:35

0

Configuring this in setting.py

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",

]

If this doesn't works, clear your browser history static files get chahed i think ‍

answered Dec 17 '21 at 17:35

Ashish

53
7

i have cleared cache i am also using django debug toolbar it shows the static images but not css. settings are same as yours – Aryan Kaushik Dec 18 '21 at 15:34
please show your project directory – Ashish Dec 19 '21 at 05:37
hey added i don't think the problem is with the structure though – Aryan Kaushik Dec 19 '21 at 17:16
okay try this use the load static in base.html – Ashish Dec 20 '21 at 12:12
@AryanKaushik hey are you still not able to load static – Ashish Dec 21 '21 at 10:13
I have used that tag I solved this problem by using django 3.2 I was using django 4 before maybe that is not stable. – Aryan Kaushik Dec 21 '21 at 12:50
@AryanKaushik yes django 4 is under development – Ashish Dec 23 '21 at 16:21

score 0 · Answer 5 · answered Dec 17 '21 at 17:57

0

Try to run the website in incognito mode.

answered Dec 17 '21 at 17:57

Tanmay Brv

89
4

already tried also cleared cache – Aryan Kaushik Dec 18 '21 at 15:30

static file css not loading in django

5 Answers5