web-dev-qa-db-fra.com

L'application ne récupère pas le fichier .css (flask/python)

Je suis en train de restituer un modèle que je tente de styliser avec une feuille de style externe. La structure du fichier est la suivante.

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

mainpage.html ressemble à ceci

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

Aucun de mes styles n'est appliqué cependant. Cela at-il quelque chose à voir avec le fait que le code HTML est un modèle que je suis en train de rendre? Le python ressemble à ceci.

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

Je sais que cela fonctionne, car je suis toujours en mesure de rendre le modèle. Cependant, lorsque j'ai essayé de déplacer mon code de style d'un bloc "style" de la balise "head" du code HTML vers un fichier externe, tout le style a disparu, laissant une page HTML nue. Tout le monde voit des erreurs avec ma structure de fichier?

pythonhtmlcsstemplatesflask
58
Zack

Vous devez avoir une configuration de dossier 'statique' (pour les fichiers css/js) à moins que vous ne l'ignoriez spécifiquement lors de l'initialisation de Flask. Je suppose que vous ne l'avez pas annulé. 

Votre structure de répertoire pour css devrait ressembler à ceci:

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

Notez que votre répertoire/styles doit être sous/static

Alors, fais ça

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

Flask va maintenant rechercher le fichier css sous static/styles/mainpage.css

129
codegeek

Dans les modèles jinja2 (utilisés par le flacon), utilisez

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

Les fichiers static se trouvent généralement dans le dossier static, sauf configuration contraire.

12
njzk2

J'ai lu plusieurs discussions et aucune d'elles n'a corrigé le problème que les gens décrivent et que j'ai aussi expérimenté.

J'ai même essayé de m'éloigner de conda et d'utiliser pip, pour passer à python 3.7, j'ai essayé tous les codages proposés et aucun d'entre eux n'a été corrigé.

Et voici pourquoi (le problème):

par défaut, python/flask recherche le statique et le modèle dans une structure de dossiers comme:

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

vous pouvez vérifier vous-même en utilisant le débogueur sur Pycharm (ou toute autre chose) et vérifier les valeurs sur l'application (app = Flask ( name )) et rechercher teamplate_folder et static_folder

afin de résoudre ce problème, vous devez spécifier les valeurs lors de la création de l'application, comme suit:

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)

les chemins TEMPLATE_DIR et STATIC_DIR dépendent de l'emplacement de l'application de fichier. dans mon cas, voir la photo, elle se trouvait dans un dossier sous src.

vous pouvez modifier le modèle et les dossiers statiques à votre guise et vous inscrire sur l'application = Flask ...

En vérité, j'ai commencé à rencontrer le problème lorsque je m'amusais avec le dossier et parfois je ne travaillais pas. cela corrige le problème une fois pour toutes

le code html ressemble à ceci:

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

Ce code

Voici la structure des dossiers

0
Stefano Tuveri

J'utilise actuellement la version 1.0.2 de la fiole . Les structures de fichiers ci-dessus ne fonctionnaient pas pour moi, mais j'en ai trouvé une qui fonctionnait ainsi:

app_folder / flask_app.py statique/ style.css modèles / index.html

(Veuillez noter que "statique" et "modèles" sont des dossiers, qui devraient porter exactement le même nom.)

Pour vérifier quelle version du flacon que vous utilisez, vous devez ouvrir Python dans terminal et taper les informations suivantes en conséquence:

>> import flask
>> flask.__version__
0
Ly-Bach