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

Question

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>

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__

Asked By: Destiny Franks

||

Source

Answer 1

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

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

Answered By: Destiny Franks

Answer 2

django.contrib.staticfiles provides a convenience management command for gathering static files in a single directory so you can serve them easily.

Set the STATIC_ROOT setting to the directory from which you’d like to serve these files, for example:

STATIC_ROOT = "/var/www/example.com/static/"

2.Run the collectstatic management command:

$ python manage.py collectstatic

This will copy all files from your static folders into the STATIC_ROOT directory.

Referred from: https://docs.djangoproject.com/en/3.1/howto/static-files/#serving-static-files-during-development

Answered By: Harsh Kairamkonda

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

Question:

Answers: