Keep getting MIME error when trying to attatch css file Django-CodePudding

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 folder: Files 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 >
            <div >
                <h2 >{{project.title}}</h2>
                    <div >
                        <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
    
    # Build paths inside the project like this: BASE_DIR / 'subdir'.
    BASE_DIR = Path(__file__).resolve().parent.parent
    
    
    # Quick-start development settings - unsuitable for production
    # See https://docs.djangoproject.com/en/4.1/howto/deployment/checklist/
    
    # SECURITY WARNING: keep the secret key used in production secret!
    SECRET_KEY = "django-insecure-zzk5%zz_)kGo$9 -hocf_2azb@wj@)k89b=^18xk*80g!ekq"
    
    # SECURITY WARNING: don't run with debug turned on in production!
    DEBUG = True
    
    ALLOWED_HOSTS = []
    
    
    # Application definition
    
    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"
    
    
    # Database
    # https://docs.djangoproject.com/en/4.1/ref/settings/#databases
    
    DATABASES = {
        "default": {
            "ENGINE": "django.db.backends.sqlite3",
            "NAME": BASE_DIR / "db.sqlite3",
        }
    }
    
    
    # Password validation
    # https://docs.djangoproject.com/en/4.1/ref/settings/#auth-password-validators
    
    AUTH_PASSWORD_VALIDATORS = [
        {
            "NAME": "django.contrib.auth.password_validation.UserAttributeSimilarityValidator",
        },
        {"NAME": "django.contrib.auth.password_validation.MinimumLengthValidator",},
        {"NAME": "django.contrib.auth.password_validation.CommonPasswordValidator",},
        {"NAME": "django.contrib.auth.password_validation.NumericPasswordValidator",},
    ]
    
    
    # Internationalization
    # https://docs.djangoproject.com/en/4.1/topics/i18n/
    
    LANGUAGE_CODE = "en-us"
    
    TIME_ZONE = "UTC"
    
    USE_I18N = True
    
    USE_TZ = True
    
    
    # Static files (CSS, JavaScript, Images)
    # https://docs.djangoproject.com/en/4.1/howto/static-files/
    
    STATIC_URL = "static/"
    
    STATICFILES_DIRS = [
        BASE_DIR / 'static'
    ]
    
    # Default primary key field type
    # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
    
    DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"

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.

CodePudding user response：

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.

CodePudding user response：

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 > 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 %}