Search code examples
htmldjangodjango-templatesdjango-staticfiles

Django won't resolve path to static file inside VS Code editor

The {% load static %} tag at the top of my html file seems to work

But when I try to link my css file from static folder using this code :

{% load static %}

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

vscode tries to create a file called {% static 'static/style.css' %} inside my templates directory, meaning the static keyword isn't being recognized.

Any help in figuring out why would be highly appreciated (screenshot of path at bottom)

Here's my relevant settings.py to link static files

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

    STATIC_URL = '/static/'

    STATICFILES_DIRS = [
    BASE_DIR / "static",
     '/Google_Solutions/static/',
    ]

My static and templates are in the main directory

and here's my home.html file head where i'm trying to include files

{% extends 'layout.html' %}
{% load static %}
{% block head %}
<meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">
  <title> Homepage </title> 



<!-- Template Main CSS File -->
{% load static %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
{% endblock %}

here's my layout.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
              <meta charset="utf-8">
              <link rel="icon" type="image/png" sizes="16x16" href="{% static '/favicon-16x16.png'%}">
              
              <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
              <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

              <link rel="preconnect" href="https://fonts.gstatic.com">
              <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap" rel="stylesheet"> 
              <link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
              <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">  
    {% block head %}

    {% endblock %}
</head>
<body>
    {% block body %}

    {% endblock %}
</body>
  
<script type="text/javascript" src="{% static 'js/app.js' %}"></script>

enter image description here

Solution

  • So I found out the error , it was only my local vscode

    Even if the hover link shows the wrong address, as long as your syntax is correct, your static files will load just fine. Check it by starting your server