CSS file won't load - Django

Question

I'm having trouble loading my CSS files. The browser that I'm using is Chrome. Here are my codes and file directories. Thanks!

file directories

• ecommerce/ecommerce/settings.py

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
....

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'store.apps.StoreConfig',
]

....

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/

STATIC_URL = '/static/'


STATICFILES_DIRS = [
  os.path.join(BASE_DIR, 'static/')
]

• ecommerce/ecommerce/urls.py

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('store.urls'))
]

• ecommerce/ecommerce/static/css/main.css

body{
    background-color:blue;
}

• ecommerce/ecommerce/store/templates/store/store.html

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

<h3>store</h3>

<img src="{% static 'images/cart.png' %}">

• ecommerce/ecommerce/store/urls.py

from django.urls import path

from . import views

urlpatterns = [
        #Leave as empty string for base url
    path('', views.store, name="store"),
    path('cart/', views.cart, name="cart"),
    path('checkout/', views.checkout, name="checkout"),

]

• ecommerce/ecommerce/store/views.py

from django.shortcuts import render

# Create your views here.
def store(request):
     context = {}
     return render(request, 'store/store.html', context)

def cart(request):
     context = {}
     return render(request, 'store/cart.html', context)

def checkout(request):
      context = {}
      return render(request, 'store/checkout.html', context)

Answer 1

Let's break this down: You are in development, right? (at least it seems like you are since you have DEBUG = True). Well, when in development, Django serves the staticfiles by itself. He does it by looking for folders called static inside each app directory. (this is the default behaviour)

In your project structure, as shown in the image you attached with your question, there's no static directory inside your store app.

You should have something like this:

store/
|   templates/
|   |   (... all your templates )
|   static/
|   |   store/
|   |   |   css/
|   |   |   |   main.css
|   |   |   images/
|   |   |   |   cart.png
|   (... all your other .py files )

please note: In that same image that you attached, I can see that you named the css file as "mian.css" instead of "main.css"

Now, as it was well said in this marvelous answer, you don't need to set in development the STATIC_ROOT nor the STATICFILES_DIRS settings, since you will not be using collectstatic there, because manage.py will take care of everything about serving the static files. So, again: not use collectstatic in development. There's no need for that.

Lastly, you will need to reference the files in your template properly. You can do it as follows:

{% static 'store/css/main.css' %}

and

{% static 'store/images/cart.png' %}

respectively.

Answer 2

In your URLs.py,

from django.conf.urls import patterns, include, url
from django.contrib import admin
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = patterns('',
url(r'^$', include('frontend.urls')),
);


urlpatterns += static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)

Make sure that your settings.py file has these defined.

BASE_DIR = os.path.dirname(os.path.dirname(__file__))

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, '../static')

STATICFILES_FINDERS = (
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'django.contrib.staticfiles.finders.FileSystemFinder',
)

Also, in your templates add on the top:

{%load staticfiles%}