He estado trabajando en una aplicación Flask simple, y en algún momento decidí agregar un estilo CSS personalizado junto con Bootstrap. Sin embargo, por alguna razón, este archivo CSS se representa como un archivo vacío. Ya sea que lo abra con http://localhost:5000/static/style.css o lo inspeccione con Firebug, el resultado es el mismo. bootstrap.min.css está cargado pero style.css está vacío, aunque en realidad no está vacío.

Plantillas:

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

La ruta de la carpeta CSS es app_root/static/css/style.css y app_root/static/css/lib/bootstrap.min.css

Pero como ya mencioné, los archivos están cargados.

¿Alguien ha tenido problemas similares?

EDITAR:

Al principio pensé que era un problema de CSS, así que hice muchas ediciones. Así es como se ve actualmente style.css:

.navbar {
    background-color: #aaa;
}

p {
    font: Arial;
}

body {
    height: 100%;
}

Lo que quiero decir con "el archivo está vacío" es que una vez que se carga, se carga vacío. Todavía no sé por qué sucede esto, pero después de jugar con él por un tiempo, me di cuenta de que tiene algo que ver con el nombre del archivo. Por ejemplo, si cambio el nombre de style.css a main.css y lo cargo en html, todo funciona bien.

Como puede ver, ambos archivos están cargados. style.css y bootstrap.min.css

enter image description here

Contenido de Bootstraps:

enter image description here

Contenido de style.css

enter image description here

Después de cambiar el nombre de style.css a main.css

enter image description here

Estructura recursiva de directorios:

project/static/css:
lib/  style.css

project/static/css/lib:
bootstrap-theme.css  bootstrap-theme.min.css  bootstrap.css  bootstrap.min.css

EDITAR 2:

Además, he logrado recrear este problema idéntico en un proyecto de prueba separado (en un virtualenv diferente) con un simple módulo app.py , plantilla estática y carpetas.

EDITAR 3: Probar el código de la aplicación:

from flask import Flask, render_template    

app = Flask(__name__)        

@app.route('/')
def index():
    return render_template('index.html')        

if __name__ == '__main__':
    app.run()

La estructura de la carpeta es la misma:

test/

./test:
app.py
static/
templates/

./test/static:
css/

./test/static/css:
lib/
main.css

./test/static/css/lib:
bootstrap.min.css

./test/templates:
index.html

Y la aplicación se inicia con:

python app.py
1
Marko Vrbanec 1 sep. 2014 a las 22:26

2 respuestas

La mejor respuesta

ACTUALIZACIÓN: Me equivoqué acerca de Flask que sirve CSS vacío. El frasco no era el problema, el navegador sí. El navegador estuvo abierto durante mucho tiempo e inicialmente almacenó en caché el archivo CSS como vacío (porque inicialmente el archivo estaba vacío).

Parece que la solución más simple para este problema sería desactivar el almacenamiento en caché del navegador en cualquiera de las herramientas de desarrollador (Firebug en mi caso). Otra solución sería agregar encabezados HTTP a todas las vistas, así:

@auth.after_app_request
def after_request(response):
    response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate'
    response.headers['Pragma'] = 'no-cache'
    response.headers['Expires'] = '0'
    return response

Aunque esto último parece una mala idea.

PD Disculpe mi novato.

5
Marko Vrbanec 3 sep. 2014 a las 16:25

Es posible que esto no responda su pregunta directamente, pero tal vez pueda resolver su problema en absoluto. Trabajar con Bootstrap debería ser simple, si conoce la forma de hacerlo, de lo contrario, puede ser bastante confuso.

Después de lidiar con esto, encontré un paquete llamado flask-bootstrap, que resolvió parte del problema. Luego me escribí a mí mismo (y lo hice público) https://pypi.python.org/pypi/machete/, que es una herramienta para generar código python a partir de plantillas.

En su caso, puede intentarlo ingresando un directorio vacío y escriba:

$ machete -t bootstrap

Hay otras herramientas, como cookiecutter, pero todavía no las probé.

Esto creará todos los archivos necesarios para que su código se pueda implementar en Pypi (si lo desea), y creará todos los archivos con una situación ejecutable, simplemente escribiendo:

$ python run.py

Luego verifique el código. Opcionalmente, puede hacer esto solo para comprender cómo funciona flask-bootstrap (que es diferente de descargar bootstrap con las manos desnudas, parece que es su escenario). O puede usar esta estructura para codificar.

De esta manera, puede concentrarse en la codificación, no en resolver problemas de instalación.

1
Lovato 2 sep. 2014 a las 13:14