Django: Refused to apply style from … because its MIME type (‘text/html’) is not a supported stylesheet MIME type

i am trying to connet my style.css in django template using the static files {% static 'assets/css/style.css' %} but i keep seeing this error Refused to apply style from 'http://127.0.0.1:8000/assets/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.. NOTE: when i copy my css and manually paste it in a style tag inside the section everything works fine, but my css have over 23,000 lines of code and it’s too much to be sitting in the head section of my project. Please how do i go about fixing this error.

index.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Favicon -->
    <link rel="shortcut icon" href="{% static 'assets/images/favicon.ico' %}">

    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap">

    <!-- Plugins CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/font-awesome/css/all.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/bootstrap-icons/bootstrap-icons.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/tiny-slider/tiny-slider.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/glightbox/css/glightbox.css' %}">

    <!-- Theme CSS -->
    <link id="style-switch" rel="stylesheet" type="text/css" href="{% static '/assets/css/style.css' %}">
</head>

JavaScript
​x
 
{% load static %}
<!DOCTYPE html>
<html lang="en">
​
<head>
    <!-- Favicon -->
    <link rel="shortcut icon" href="{% static 'assets/images/favicon.ico' %}">
​
    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap">
​
    <!-- Plugins CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/font-awesome/css/all.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/bootstrap-icons/bootstrap-icons.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/tiny-slider/tiny-slider.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/glightbox/css/glightbox.css' %}">
​
    <!-- Theme CSS -->
    <link id="style-switch" rel="stylesheet" type="text/css" href="{% static '/assets/css/style.css' %}">
</head>
​

tree

├───base
│   ├───migrations
│   │   └───__pycache__
│   └───__pycache__
├───course
│   ├───migrations
│   │   └───__pycache__
│   ├───templatetags
│   │   └───__pycache__
│   └───__pycache__
├───dashboard
│   ├───migrations
│   │   └───__pycache__
│   └───__pycache__
├───dexxaedprj
│   └───__pycache__
├───static
│   ├───assets
│   │   ├───css
│   │   │   ├───components
│   │   │   │   └───vendor
│   │   │   └───custom
│   │   │       ├───forms
│   │   │       └───helper
│   │   ├───images
│   │   │   ├───avatar
│   │   │   ├───client
│   │   │   ├───courses
│   │   │   │   └───4by3
│   │   │   ├───element
│   │   │   └───flags
│   │   ├───js
│   │   └───vendor
│   │       ├───bootstrap
│   │       │   ├───dist
│   │       │   │   └───js
│   │       │   ├───js
│   │       │   │   └───src
│   │       │   │       ├───dom
│   │       │   │       └───util
│   │       │   ├───node_modules
│   │       │   │   └───@popperjs
│   │       │   │       └───core
│   │       │   │           └───lib
│   │       │   │               ├───dom-utils
│   │       │   │               ├───modifiers
│   │       │   │               └───utils
│   │       │   └───scss
│   │       │       ├───forms
│   │       │       ├───helpers
│   │       │       ├───mixins
│   │       │       ├───utilities
│   │       │       └───vendor
│   │       ├───bootstrap-icons
│   │       │   └───fonts
│   │       ├───font-awesome
│   │       │   ├───css
│   │       │   └───webfonts
│   │       ├───glightbox
│   │       │   ├───css
│   │       │   └───js
│   │       ├───purecounterjs
│   │       │   └───dist
│   │       └───tiny-slider
│   └───Old Assets
│       └───assets
│           ├───css
│           ├───images
│           │   ├───about
│           │   ├───course-images
│           │   ├───courses
│           │   ├───dashboard
│           │   └───left-imgs
│           ├───js
│           └───vendor
│               ├───bootstrap
│               │   ├───css
│               │   │   └───dist
│               │   │       └───css
│               │   └───js
│               ├───fontawesome-free
│               │   ├───css
│               │   └───webfonts
│               ├───jquery-ui-1.12.1
│               ├───js
│               │   └───src
│               │       └───tools
│               ├───node_modules
│               │   └───popper.js
│               │       └───dist
│               │           └───esm
│               ├───OwlCarousel
│               │   └───assets
│               ├───scss
│               │   ├───mixins
│               │   ├───utilities
│               │   └───vendor
│               ├───semantic
│               └───unicons-2.0.1
│                   ├───css
│                   └───fonts
├───templates
│   ├───base
│   └───Old Templates
│       ├───admin
│       ├───base
│       ├───course
│       ├───dashboard
│       ├───design
│       ├───howto
│       └───userauths
└───userauths
    ├───migrations
    │   └───__pycache__
    └───__pycache__

JavaScript
 
├───base
│   ├───migrations
│   │   └───__pycache__
│   └───__pycache__
├───course
│   ├───migrations
│   │   └───__pycache__
│   ├───templatetags
│   │   └───__pycache__
│   └───__pycache__
├───dashboard
│   ├───migrations
│   │   └───__pycache__
│   └───__pycache__
├───dexxaedprj
│   └───__pycache__
├───static
│   ├───assets
│   │   ├───css
│   │   │   ├───components
│   │   │   │   └───vendor
│   │   │   └───custom
│   │   │       ├───forms
│   │   │       └───helper
│   │   ├───images
│   │   │   ├───avatar
│   │   │   ├───client
│   │   │   ├───courses
│   │   │   │   └───4by3
│   │   │   ├───element
│   │   │   └───flags
│   │   ├───js
│   │   └───vendor
│   │       ├───bootstrap
│   │       │   ├───dist
│   │       │   │   └───js
│   │       │   ├───js
│   │       │   │   └───src
│   │       │   │       ├───dom
│   │       │   │       └───util
│   │       │   ├───node_modules
│   │       │   │   └───@popperjs
│   │       │   │       └───core
│   │       │   │           └───lib
│   │       │   │               ├───dom-utils
│   │       │   │               ├───modifiers
│   │       │   │               └───utils
│   │       │   └───scss
│   │       │       ├───forms
│   │       │       ├───helpers
│   │       │       ├───mixins
│   │       │       ├───utilities
│   │       │       └───vendor
│   │       ├───bootstrap-icons
│   │       │   └───fonts
│   │       ├───font-awesome
│   │       │   ├───css
│   │       │   └───webfonts
│   │       ├───glightbox
│   │       │   ├───css
│   │       │   └───js
│   │       ├───purecounterjs
│   │       │   └───dist
│   │       └───tiny-slider
│   └───Old Assets
│       └───assets
│           ├───css
│           ├───images
│           │   ├───about
│           │   ├───course-images
│           │   ├───courses
│           │   ├───dashboard
│           │   └───left-imgs
│           ├───js
│           └───vendor
│               ├───bootstrap
│               │   ├───css
│               │   │   └───dist
│               │   │       └───css
│               │   └───js
│               ├───fontawesome-free
│               │   ├───css
│               │   └───webfonts
│               ├───jquery-ui-1.12.1
│               ├───js
│               │   └───src
│               │       └───tools
│               ├───node_modules
│               │   └───popper.js
│               │       └───dist
│               │           └───esm
│               ├───OwlCarousel
│               │   └───assets
│               ├───scss
│               │   ├───mixins
│               │   ├───utilities
│               │   └───vendor
│               ├───semantic
│               └───unicons-2.0.1
│                   ├───css
│                   └───fonts
├───templates
│   ├───base
│   └───Old Templates
│       ├───admin
│       ├───base
│       ├───course
│       ├───dashboard
│       ├───design
│       ├───howto
│       └───userauths
└───userauths
    ├───migrations
    │   └───__pycache__
    └───__pycache__
​

Answer

all i did was add this line in my base.html head section

<head>
     ...
     <base href="{% static '/' %}">
</head>

JavaScript
 
<head>
     ...
     <base href="{% static '/' %}">
</head>
​

Advertisement

Answer