La aplicación no recoge el archivo .css (matraz / python)

113

Estoy renderizando una plantilla, que estoy intentando diseñar con una hoja de estilo externa. La estructura del archivo es la siguiente.

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.html tiene este aspecto

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

Sin embargo, ninguno de mis estilos se está aplicando. ¿Tiene algo que ver con el hecho de que html es una plantilla que estoy renderizando? La pitón se ve así.

return render_template("mainpage.html", variables..)

Sé que esto está funcionando, porque todavía puedo renderizar la plantilla. Sin embargo, cuando intenté mover mi código de estilo de un bloque de "estilo" dentro de la etiqueta "head" del html a un archivo externo, todo el estilo desapareció, dejando una página html vacía. ¿Alguien ve algún error con mi estructura de archivos?

— Zack
fuente

225

Debe tener una configuración de carpeta 'estática' (para archivos css / js) a menos que la anule específicamente durante la inicialización de Flask. Supongo que no lo anuló.

Su estructura de directorio para css debería ser como:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

Tenga en cuenta que su directorio / styles debe estar debajo de / static

Entonces, haz esto

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">

Flask ahora buscará el archivo css en static / styles / mainpage.css

— codegeek
fuente

4

Esto debe marcarse como respuesta. Esta solución funcionó para mí, si no fue así para usted, díganos que lo ayudemos. De lo contrario, márquelo. @zack

— Shahryar Saljoughi

2

¿Por qué no se ha marcado esto como la respuesta correcta? Debería ser.

— pfabri

1

Lo siento, olvidé volver a este :) La carpeta estática era definitivamente el camino a seguir

— Zack

1

para Javascript agregue el archivo de secuencia de comandos a la carpeta estática . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

— HAr

17

En las plantillas jinja2 (que usa el matraz), use

href="{{ url_for('static', filename='mainpage.css')}}"

Sin embargo, los staticarchivos suelen estar en la staticcarpeta, a menos que se configure de otro modo.

— njzk2
fuente

1

Desafortunadamente, esto me está dando un error. BuildError: ('mainpage.css', {}, None)

— Zack

6

He leído varios hilos y ninguno de ellos solucionó el problema que la gente está describiendo y yo también lo he experimentado.

Incluso intenté alejarme de conda y usar pip, para actualizar a python 3.7, probé todos los códigos propuestos y ninguno de ellos se solucionó.

Y aquí está el por qué (el problema):

por defecto, python / flask busca la estática y la plantilla en una estructura de carpetas como:

/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
 and 
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>

puede verificar usted mismo usando el depurador en Pycharm (o cualquier otra cosa) y verificar los valores en la aplicación (app = Flask ( nombre )) y buscar teamplate_folder y static_folder

para solucionar esto, debe especificar los valores al crear la aplicación algo como esto:

TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')

# app = Flask(__name__) # to make the app run without any
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)

la ruta TEMPLATE_DIR y STATIC_DIR dependen de la ubicación de la aplicación de archivo. en mi caso, vea la imagen, estaba ubicado dentro de una carpeta bajo src.

puede cambiar la plantilla y las carpetas estáticas como desee y registrarse en la aplicación = Frasco ...

En verdad, comencé a experimentar el problema al jugar con la carpeta y, a veces, trabajé a veces no. esto soluciona el problema de una vez por todas

el código html se ve así:

<link href="{{ url_for('static', filename='libraries/css/bootstrap.css') }}" rel="stylesheet" type="text/css" >

Este es el código

Aquí la estructura de las carpetas

— Stefano Tuveri
fuente

2

Sigues teniendo problemas después de seguir la solución proporcionada por codegeek
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">:?

En Google Chrome, presionar el botón de recarga (F5) no recargará los archivos estáticos. Si ha seguido la solución aceptada pero aún no ve los cambios que ha realizado en CSS, presione ctrl + shift + Rpara ignorar los archivos en caché y volver a cargar los archivos estáticos.

En Firefox, al presionar el botón de recarga aparece para recargar los archivos estáticos.

En Edge, presionar el botón Actualizar no recarga el archivo estático. ctrl + shift + RSe supone que presionar ignora los archivos en caché y recarga los archivos estáticos. Sin embargo, esto no funciona en mi computadora.

— Christian Johansen
fuente

Muchas gracias, resolvió mi problema en Google Chrome (Ctrl + shift + R). ¿Alguna forma de ignorar los archivos en caché automáticamente?

— Alexis

1

Estoy ejecutando la versión 1.0.2 de flask en este momento. Las estructuras de archivos anteriores no funcionaron para mí, pero encontré una que sí, que es la siguiente:

     app_folder/ flask_app.py/ static/ style.css/ templates/
     index.html

(Tenga en cuenta que 'estática' y 'plantillas' son carpetas, que deben tener exactamente el mismo nombre).

Para verificar qué versión de matraz está ejecutando, debe abrir Python en la terminal y escribir lo siguiente en consecuencia:

matraz de importación

matraz --versión

— Ly-Bach
fuente

Lo siento, pero ¿podría describir exactamente lo que hizo? ¡Estoy luchando con el mismo problema!

— user3002996

0

La estructura del proyecto del matraz es diferente. Como mencionaste en la pregunta, la estructura del proyecto es la misma, pero el único problema es la carpeta de estilos. La carpeta de estilos debe estar dentro de la carpeta estática.

static/styles/style.css

— Gopi P
fuente

0

Un punto más para agregar a este hilo.

Si agrega un guión bajo en su nombre de archivo .css, entonces no funcionaría.

— SW Jeong
fuente

0

Un punto más para agregar Junto con las respuestas arriba votadas, asegúrese de que la línea a continuación se agregue al app.pyarchivo:

app = Flask(__name__, static_folder="your path to static")

De lo contrario, el matraz no podrá detectar la carpeta estática.

— Sanjay Nandakumar
fuente

0

Si alguno de los métodos anteriores no funciona y su código es perfecto, intente actualizar presionando Ctrl + F5. Borrará todos los chaces y luego volverá a cargar el archivo. Funcionó para mí.

— Hackytech
fuente

-8

Estoy bastante seguro de que es similar a la plantilla de Laravel, así es como hice la mía.

<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />

Referido: problema de ruta de archivos CSS

Aplicación de matraz simple que lee su contenido de un archivo .html. ¿Se bloquea la hoja de estilo externa?

— nCore
fuente

2

No voy a rechazarlo, pero para su edificación, Laravel es PHP y Flask es Python. No funcionan de forma similar. Tienen estructuras de directorio y comportamientos muy diferentes.

— Mr. Concolato

para importar archivos estáticos, necesitamos colocar esos archivos estáticos en una carpeta estática. La estructura de carpetas que ha proporcionado funciona con un archivo HTML normal. pero no con Flask

— Gopi P