CODEWITHSUNDEEP
javascriptpythoncssdjango
Yago Gomes
Yago Gomes

Reputation: 13

CSS, Bootstrap and Javascript is not working with Django

I'm trying to build a webapp as a final project in my degree, but I'm having problems with configuring the css with django. I already did a few recommendations on the internet without success. When I add "style" on tags it works properly, but when I tries to use the ".css" file it doesn't load. Could anyone help me please?

Here is my html head:

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="{% static 'static/css/index.css' %}" rel="stylesheet" type="text/css">
        <link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">
        <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
        <script
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDikjsB27i23XRQad382KBcFHKNxzZ--1w&callback=initAutocomplete&libraries=places&v=weekly"
          defer
        ></script>
        <link href="{https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
        <link href="{https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap" rel="stylesheet">
        <meta name="google" content="notranslate" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="{//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <title>The Queue</title>
    </head>

My settings.py:

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

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

my urls.py:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

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

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

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

Directories:

├───queueApp
│   │   admin.py
│   │   apps.py
│   │   models.py
│   │   tests.py
│   │   urls.py
│   │   views.py
│   │   __init__.py
│   │
│   ├───migrations
│   │   │   __init__.py
│   │   │
│   │   └───__pycache__
│   │           __init__.cpython-38.pyc
│   │
│   ├───templates
│   │       base.html
│   │
│   └───__pycache__
│           admin.cpython-38.pyc
│           models.cpython-38.pyc
│           urls.cpython-38.pyc
│           views.cpython-38.pyc
│           __init__.cpython-38.pyc
│
├───queueProject
│   │   asgi.py
│   │   settings.py
│   │   urls.py
│   │   wsgi.py
│   │   __init__.py
│   │
│   └───__pycache__
│           settings.cpython-38.pyc
│           urls.cpython-38.pyc
│           wsgi.cpython-38.pyc
│           __init__.cpython-38.pyc
│
├───static
│   ├───css
│   │       index.css
│   │
│   ├───img
│   └───js
│           index.js

Upvotes: 1

Views: 4550

Answers (3)

ha-neul
ha-neul

Reputation: 3248

You have several problems here:

  1. In your html file, in order to use {% static ... %}, you should add {% load static %} in the head section before all the <link..> etc. Check out the document https://docs.djangoproject.com/en/3.1/howto/static-files/

  2. also you should change { % static 'static/css/ .. %} to { % static 'css/...%}

  3. For the ones do not use {% static ...%}, you have many typos. For example:

These ones have additional {

<link href="{https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

        <link href="{https://fonts.googleapis.com/css2?family=Sansita+Swashed&display=swap" rel="stylesheet">

This link seems wrong.

        <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  1. the following one, you should not use {% static ..% }
<link rel="preconnect" href="{% static 'https://fonts.gstatic.com' %}">

Since there are many errors, it may be best to delete them all, and add those lines (after correction of cause) one-by-one to resolve this issue.

Upvotes: 2

Jake Peralta
Jake Peralta

Reputation: 547

Inside your Settings.py file try changing STATIC_ROOT directory name to 'static' instead of 'staticfiles'.

So, your code will look like:

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

And for safe side try running python manage.py makemigrations and then python manage.py migrate. So that if any changes happens within databases will get applied.

Upvotes: 0

Kyle Hynes
Kyle Hynes

Reputation: 11

might be a problem with serving the static files. if you havnt already, try checking out: https://docs.djangoproject.com/en/3.1/howto/static-files/

Upvotes: 0

Related Questions