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=";>
<link rel="preconnect" href="; crossorigin>
<link rel="stylesheet" href=":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
│ │ │ ├───ponents
│ │ │ │ └───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__
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.">
<link rel="preconnect" href="https://fonts.gstatic." crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis./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
│ │ │ ├───ponents
│ │ │ │ └───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__
- Does this answer your question? CSS not loading wrong MIME type Django – jabaa Commented May 4, 2022 at 11:47
-
1
@jabaa i tried this
import mimetypes mimetypes.add_type("text/css", ".css", True)but it's not working or is there a special place to add this code? – Destiny Franks Commented May 4, 2022 at 11:50 - Where did you add this? – jabaa Commented May 4, 2022 at 12:08
- I just pasted it my settings.py – Destiny Franks Commented May 4, 2022 at 17:32
- Yes check the answer below – Destiny Franks Commented Jan 9, 2023 at 12:59
2 Answers
Reset to default 3all i did was add this line in my base.html head section
<head>
...
<base href="{% static '/' %}">
</head>
django.contrib.staticfiles provides a convenience management mand 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./static/"
2.Run the collectstatic management mand:
$ python manage.py collectstatic
This will copy all files from your static folders into the STATIC_ROOT directory.
Referred from: https://docs.djangoproject./en/3.1/howto/static-files/#serving-static-files-during-development