Loading CSS returns 404 using django

Question

I am building a chatbot application. The CSS for the frontend is not getting loaded by using django's static data load.

path to css is - C:\Documents\Django_Workspace\bot\templates\static\bot.css

path to html is - C:\Documents\Django_Workspace\bot\templates\index.html

I have added STATIC_URL in my settings file as

STATIC_URL = '/static/'

The HTML link tag looks like

{% load static %}
<head>
  <meta charset="UTF-8">
  <title>bot</title>
  <link rel="stylesheet" type="text/css" href="{% static "bot.css" %}" />
</head>

My Urls.py looks like

from django.conf.urls import url
from . import views

urlpatterns = [
   url(r'^$', views.index, name='index'),
]

This is how I render the html page

from django.http import HttpResponse
from django.template import loader
from .models import User_Message

def index(request):
   template = loader.get_template('index.html')
   return HttpResponse(template.render())

Can anyone help. I've even tried hardcoding the path of css file in the html tag. But, that's not working

John Joseph Fernandes · Accepted Answer · 2017-08-15 18:13:03Z

1

you need to run the following

python manage.py collectstatic

answered Aug 15, 2017 at 18:13

John Joseph Fernandes

3693 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paulo Almeida · Accepted Answer · 2017-08-15 17:44:28Z

1

Your CSS file shouldn't be in the templates folder but in a static folder within the app. From the documentation:

Store your static files in a folder called static in your app. For example my_app/static/my_app/example.jpg.

See the rest of that section too, it's very succint. You probably want to have a myapp folder inside static, to avoid collisions if you have more apps.

answered Aug 15, 2017 at 17:44

Paulo Almeida

8,09030 silver badges36 bronze badges

Collectives™ on Stack Overflow

Loading CSS returns 404 using django

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related