0

Estoy realizando una sencilla web con DJango y cuando aplico la etiqueta <style></style> directamente en el archivo html no hay problemas, pero cuando extraigo el css a un archivo para que esté el código más limpio y ordenado ya no funciona.

Según he leído, he creado una carpeta static, dentro una llamada css y dentro de esta quiero guardar los diferentes archivos css.

Una vez hecho esto, cargo mediante {% load static %} la carpeta static/css y en el head declaro la ruta a mi fichero css.

Pero no me lo carga y me muestra el siguiente error:

"GET /static/css/main.css HTTP/1.1" 404 1660

Es decir, no encuentra mi fichero. A continuación adjunto mi código:

{% load static %}

<!DOCTYPE html>
    <html lang="es">

        <head>
            <title>
                {% block title%}{% endblock%}
            </title>

            <meta charset="utf-8">
            <link rel="stylesheet" type="text/css" href="{% static "css/main.css" %}">

        </head>
        <body>
            <h1> TÍTULO </h1>

            {% block content %}{% endblock%}
        </body>
    </html>

¿Alguien puede ayudarme? Muchas gracias.

Edit

Leyendo más info he visto que a veces se añade en el archivo settings.py la siguiente línea, STATIC_ROOT = [os.path.join(BASE_DIR, "static"),] pero no funciona tampoco.

2
  • Hola,¿ pudiste solucionarlo?, yo también tengo el mismo problema Commented el 7 mar. 2021 a las 4:43
  • Buenas, sube tu pregunta, avísame por aquí y si se resolverlo te ayudo!
    – Lleims
    Commented el 7 mar. 2021 a las 18:58

1 respuesta 1

0

Como bien dices primero se debe de crear la carpeta static, quedaría algo así:

static
   └───css

Posterior a esto dentro del archivo settings.py se debe de poner:

STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

Al final del archivo


Una vez realizado lo anterior, se debe de agregar al head de la plantilla lo siguiente:

<link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.