Html does not import css file

Question

Silly question but i can't figure it out and it's too much. In a django project, in the same directory i have base_template.html and base_style.css. In a child folder i have search.html.

base_template.html
base_style.css
folder---- 
          search.html

Search.html extends base_template.html like so

{% extends "base_template.html" %}

Inside base_template.html i import base_style.css

<!DOCTYPE html>
<html>
<head>
    <title>{% block title %} Base template {% endblock %}</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="base_style.css">
    <link rel="stylesheet" type="text/css" href="awesome_font.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
    <style>
    {% block Additional_Styles %}
    {% endblock %}
    </style>

And there's no way it works. **Already tried:

./base_style.css
 /base_style.css
 base_style.css"/**

If i replace

<link rel="stylesheet" type="text/css" href="base_style.css">

with:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

It works, the css loads. I must mention that i just downloaded the css from the link and made no modifications.

Why doesnt the import work?

EDIT

settings.py:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'templates')],

 ....
STATIC_URL = '/static/'
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, 'static')

So the base_template is in MainDjangoApp\templates

Maybe you have to find out what the real docroot path is and then navigate to your template file. — Reporter
– Reporter, Commented May 23, 2017 at 12:20

doru · Accepted Answer · 2017-05-23 12:46:11Z

2

You should pu your static files (.css, .js) in a static folder inside your app:

app
   static
       app 
          css
              base_style.css

adn in your template you should use

{% load static %}

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

You should definitely read Writing your first Django app, part 6 and Managing static files (e.g. images, JavaScript, CSS) on the djangoproject site.

edited May 23, 2017 at 12:46

answered May 23, 2017 at 12:22

doru

9,1502 gold badges37 silver badges45 bronze badges

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

1 Comment

Mike Over a year ago

it still doesnt work. Can it be something from settings.py?

Mike · Accepted Answer · 2017-05-23 13:07:58Z

0

A solution would have been to change the folder of base_style.css as in the docs, however i added this to settings.py and i got it working. My app is not that complex so i won't get tangled in files.

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "templates"),
]

answered May 23, 2017 at 13:07

Mike

5069 silver badges25 bronze badges

Collectives™ on Stack Overflow

Html does not import css file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related