Issue with static files

Using Django Templates & Frontend
1

I have an issue with a css file which causes an error in the browser terminal:

Refused to apply style from ‘http://127.0.0.1:8000/accounts/login/{%20static%20’css/uwstyles.css’}’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

My project tree is as follows:
project
app
static
ccs
uwstyle.css
templates
templates
registration
login.html
project

My settings;py contains:

STATIC_ROOT = BASE_DIR / “staticfiles”
STATIC_URL = ‘static/’
STATICFILES_DIRS = [
os.path.join(BASE_DIR, ‘app’, ‘static’)
]
STATICFILES_FINDERS = [ ‘django.contrib.staticfiles.finders.FileSystemFinder’, ‘django.contrib.staticfiles.finders.AppDirectoriesFinder’,].

Has anyone a clue of what is wrong?

2

Sorry the project structure is as follows:

Capture d’écran 2023-04-28 175414
Capture d’écran 2023-04-28 175414571×1255 51 KB

uwstyles.css is in the static folder

3

Side note: When posting code, templates, settings, etc, enclose the text between lines of three backtick - ` characters. This means you’ll have a line of ```, then the code (etc), then another line of ```.

If this is the url attempting to be used, you have a syntax error in the template being rendered. Please post the original template.

4

Hello Ken,

I hope you are doing well.

Here the termplates and css code:

registration_generic.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gestion Co</title>

  <!--Références locales-->
  {%load static%}
  <link rel="stylesheet" href="{% static 'css/uwstyles.css'}">
  <link rel="icon" href="{% static 'UW_icone.ico' %}">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  <link href="https://unpkg.com/bootstrap-table@1.21.3/dist/bootstrap-table.min.css" rel="stylesheet">
  <link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css> <!--contient les icones. visualisables https://github.com/atisawd/boxicons/tree/master/svg -->
</head>

<body>
<div class="d-flex justify-content-center align-items-center min-vh-100">
  <div class = "container">
    <div class = "row">
      <div class="col-md-6 offset-md-3 col-12 align-items-center">
        <div class="formulaire shadow-lg">
          <img class = logo src="{% static 'UW.png' %}" alt="Logo UrbanWave">

        {% block content %}
        {% endblock %}

        </div>
      </div>
    </div>
  </div>
</div>
<!--
</body>
</html>

login.html

{% extends "registration_generic.html" %}

{% block content %}

{% if form.errors %}
  <p>Votre nom d'utilisateur et votre mot de passe ne correspondent pas. Veuillez ressaisir les informations.<p>
{% endif %}

{% if next %}
  {% if user.is_authenticated %}
    <p>Votre compte n'est autorisé à accèder à cette page. Merci de vous authentifier avec un compte autorisé.</p>
  {% endif %}
{% endif %}
<form method="post" action="{% url 'login' %}">
  {% csrf_token %}
  <div class="bloc"></div>
  <h3 > Connexion </h3>
  <br>
  <table>
    <tr>
      <td>Nom d'utilisateur:</td>
      <td class="border-0" >{{ form.username }}</td>
    </tr>
    <tr>
      <td>Mot de passe:</td>
      <td>{{ form.password }}</td>
    </tr>
  </table>
  <div class="bloc"></div>
  <div class="bloc">
    <input class="mx-auto p-6" type="submit" value="Se connecter">
    <input type="hidden" name="next" value="{{ next }}"> 
    <div class="bloc"></div>
    <p class="text-center"><a href="{% url 'password_reset' %}">Vous avez oublié votre mot de passe?</a></p>
  </div>
</form>


{% endblock %}

and uwstyles.css

.sidebar-nav {
    margin-top: 20px;
    padding: 0;
    list-style: none;
  }

.no-display{
  display: none;
}

.custom-line{
    min-height: 5rem;
    margin-bottom: 3rem;
}
.formulaire{
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background-color: white;
}
.formulaire h3 {
    margin-top: 0;
}
.bloc {
    padding: 10px;
    text-align: center;
}

.logo {
  width: 10%;
  height: 10%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

body {
    background: rgb(242, 242, 242) ;
}

UW-icone.ico is displayed. (login.html) But the css (class .logo) does not apply.

I Look forward reading you
My best
Richard

5

You’re missing the % at the end of that tag.

6

Hello, this is Gulshan Negi.
Well, I searched about it on Google, and I found that you must ensure the following in order to resolve the problem with the CSS file not loading in the browser and resulting in a MIME type error:

  1. Make sure there are no extra spaces before the closing brace in the URL you’re using to link to the CSS file in your login template.
  2. Check that the settings.py file’s LOGIN_TEMPLATE variable is pointing to the correct path for the login template.
  3. Run the collectstatic command in the executives’ order to duplicate your static records to the STATIC_ROOT index.
    I hope it will help you
    Thanks
7

@Gulshan212 Unfortunately, none of those conditions apply to this situation. Also, while they might apply in some specific cases, they’re not general solutions to problems of this type. (A LOGIN_TEMPLATE setting would have nothing to do with loading a static file, and collectstatic doesn’t apply in a development situation.)

8

Grrrr… I hate myself (just form time to time!)
Thanks Ken

1 Like