Keep getting MIME error when trying to attatch css file Django

Question

I know this question has been asked before but I have tried to implement the answers to those forums but none have worked for me so far.

Here is my html file:

    {% include 'main.html' %}
{% load static %}
<head>
    <link rel="stylesheet" type="text/css" href="projects.css"/>
</head>
<body>
<h1 style="text-align: center">Projects</h1>
    <h1>{{projects}}</h1>
    {% for project in context %}
    {% with 'jweb/images/'|add:project.image as project_photo %}
        <div class="card-wrap">
            <div class="card">
                <h2 class="card-header">{{project.title}}</h2>
                    <div class="card-image">
                        <img src="{% static project_photo %}">
                     </div>
            </div>
        </div>
    {% endwith %}
    {% endfor %}
</body>
{% include 'pagebottom.html' %}

Here is my css:

.card-wrap{
    width: auto;
}
.card{
    background: blue;
    padding:3rem;
    border:none;
    box-shadow: 0 2px 5px 0 rgb(0,0,.2);
    border-radius: .25rem;
}
.card-image{
    min-width: 0;
    min-width: 0;
}
.card-image > img{
    height:100%;
    width:100%;
    object-fit:contain;
}

Here is my settings.py:

import os
import mimetypes
mimetypes.add_type("text/css", ".css", True)
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent
DEBUG = True
ALLOWED_HOSTS = []

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "blog"
]

MIDDLEWARE = [
    "django.middleware.security.SecurityMiddleware",
    "django.contrib.sessions.middleware.SessionMiddleware",
    "django.middleware.common.CommonMiddleware",
    "django.middleware.csrf.CsrfViewMiddleware",
    "django.contrib.auth.middleware.AuthenticationMiddleware",
    "django.contrib.messages.middleware.MessageMiddleware",
    "django.middleware.clickjacking.XFrameOptionsMiddleware",
]

ROOT_URLCONF = "jweb.urls"

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [
            BASE_DIR / 'templates'
        ],
        "APP_DIRS": True,
        "OPTIONS": {
            "context_processors": [
                "django.template.context_processors.debug",
                "django.template.context_processors.request",
                "django.contrib.auth.context_processors.auth",
                "django.contrib.messages.context_processors.messages",
            ],
        },
    },
]

WSGI_APPLICATION = "jweb.wsgi.application"

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.sqlite3",
        "NAME": BASE_DIR / "db.sqlite3",
    }
}


STATIC_URL = "static/"

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]

Here is my folder:

Files

I keep getting a 404 error: Refused to apply style from 'http://127.0.0.1:8000/projects/projects.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. It seems like I had the correct link statement in my html file and have tried to add text/css mimetypes but it keeps spitting the error.

grab css file url from rendered page, open it in separate tab and show what happens. also share urls.py — Ivan Starostin, Dec 02 '22 at 12:55

score 0 · Answer 1 · answered Dec 01 '22 at 21:03

0

Try changing the order of your installed apps to this:

    INSTALLED_APPS = [
        "blog",

        "django.contrib.admin",
        "django.contrib.auth",
        "django.contrib.contenttypes",
        "django.contrib.sessions",
        "django.contrib.messages",
        "django.contrib.staticfiles",
    ]

My guess is the django.contrib.contenttypes isn't working properly because you have it listed before your blog app instead of after it.

answered Dec 01 '22 at 21:03

kimbo

2,513
1
15
24

Thanks for the quick response. I tried changing it but the error is still popping up – champa Dec 01 '22 at 21:07
Did you try everything listed here? https://stackoverflow.com/questions/35557129/css-not-loading-wrong-mime-type-django – kimbo Dec 01 '22 at 21:10
The two that I would try are [set DEBUG=true when running locally](https://stackoverflow.com/a/67700126/9638991), and maybe more especially [add static files section to urls.py](https://stackoverflow.com/a/64376899/9638991) – kimbo Dec 01 '22 at 21:12
yes I have tried everything in that link. Also, I already have debug set to true and just tried adding static files to my url.py. It didn't work – champa Dec 01 '22 at 21:34

score 0 · Answer 2 · answered Dec 01 '22 at 21:25

You forgot to wrap you content in a block. But, let me share a basic example, where you can render styles and scripts per page, in addition to general css and js files.

base.html

{% load static %}

<!DOCTYPE html>
<html lang='en'>
    <head>
        <link rel="stylesheet" href="{% static 'base.css' %}">
        {% block style %}{% endblock %}
        <title>{% block title %}My amazing site{% endblock %}</title>
        <meta charset='utf-8'>
    </head>

    <header>
        <!-- Include a Navbar for instance -->
    </header>

    <body>
        <div id="content">
            {% block content %}{% endblock %}
        </div>
    </body>

    <footer>
        {% block script %}{% endblock %}
    </footer>
</html>

extended_base.html

{% extends 'base.html' %}
{% load static %}

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

{% block content %}
    <h1 class="from-extended-base"> My awesome Content</h1>
    <h2 id="demo">  </h2>
{% endblock %}

{% block script %}
    <script>
        window.onload = function() {
            console.log('hello!')
            document.getElementById("demo").innerHTML = 'cool!';
        }
    </script>
{% endblock %}

Thanks for the suggestion. Does this have anything to do with my css file not loading properly? — champa, Dec 01 '22 at 21:36
Did you try to wrap the body in a block? Otherwise its not properly rendered — Niko, Dec 01 '22 at 22:54
change `` to ``, you are probably pointing to the wrong path, thus the 404. — Niko, Dec 02 '22 at 01:12

Keep getting MIME error when trying to attatch css file Django

2 Answers2