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

113

Je suis en train de rendre un modèle que j'essaie de styliser avec une feuille de style externe. La structure des fichiers 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é. Cela a-t-il quelque chose à voir avec le fait que le 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" dans la balise "head" du html vers un fichier externe, tout le style a disparu, laissant une page html nue. Quelqu'un voit-il des erreurs avec ma structure de fichiers?

python html css templates flask Zack
la source

227

Vous devez avoir une configuration de dossier «statique» (pour les fichiers css / js) sauf si vous la remplacez spécifiquement lors de l'initialisation de Flask. Je suppose que vous ne l'avez pas ignoré.

Votre structure de répertoire pour css devrait être comme:

/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 recherchera maintenant le fichier css sous static / styles / mainpage.css

codegeek
la source

4

Cela devrait être signalé comme réponse. Cette solution a fonctionné pour moi, sinon pour vous, dites-nous de vous aider. Sinon, signalez-le. @zack

Shahryar Saljoughi

2

Pourquoi cela n'a-t-il pas été marqué comme la bonne réponse? Ça devrait être.

pfabri

1

Désolé, j'ai oublié de revenir à celui-ci :) Le dossier statique était définitivement la voie à suivre

Zack

1

pour Javascript, ajoutez un fichier de script au dossier statique . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

HAr

17

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

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

Les staticfichiers se trouvent généralement dans le staticdossier, sauf configuration contraire.

njzk2
la source

1

Cela me donne une erreur malheureusement. BuildError: ('mainpage.css', {}, None)

Zack

6

J'ai lu plusieurs threads et aucun d'entre eux n'a résolu le problème que les gens décrivent et que j'ai rencontré aussi.

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 la 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 par vous-même en utilisant le débogueur sur Pycharm (ou autre chose) et vérifier les valeurs sur l'application (app = Flask ( nom )) et rechercher teamplate_folder et static_folder

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

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)

le chemin TEMPLATE_DIR et STATIC_DIR dépendent de l'emplacement de l'application de fichier. dans mon cas, voir l'image, il était situé dans un dossier sous src.

vous pouvez changer le modèle et les dossiers statiques comme vous le souhaitez et vous inscrire sur l'application = Flask ...

En vérité, j'ai commencé à rencontrer le problème en jouant avec un dossier et parfois je ne travaillais pas. cela résout 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" >

C'est le code

Voici la structure des dossiers

Stefano Tuveri
la source

2

Ayant encore des problèmes après avoir suivi la solution fournie par codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?

Dans Google Chrome, le fait d' appuyer sur le bouton de rechargement (F5) ne rechargera pas les fichiers statiques. Si vous avez suivi la solution acceptée mais que vous ne voyez toujours pas les modifications que vous avez apportées à CSS, appuyez sur ctrl + shift + Rpour ignorer les fichiers mis en cache et recharger les fichiers statiques.

Dans Firefox, le fait d' appuyer sur le bouton de rechargement semble recharger les fichiers statiques.

Dans Edge, le fait d' appuyer sur le bouton d'actualisation ne recharge pas le fichier statique. Le fait d'appuyer sur ctrl + shift + Rest censé ignorer les fichiers mis en cache et recharger les fichiers statiques. Cependant, cela ne fonctionne pas sur mon ordinateur.

Christian Johansen
la source

Merci beaucoup, cela a résolu mon problème dans Google Chrome (Ctrl + Maj + R). Un moyen d'ignorer automatiquement les fichiers mis en cache?

Alexis

1

J'utilise la version 1.0.2 de flask en ce moment. Les structures de fichiers ci-dessus ne fonctionnaient pas pour moi, mais j'en ai trouvé une qui fonctionnait comme suit:

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

(Veuillez noter que 'static' et 'templates' sont des dossiers qui doivent être nommés exactement de la même façon.)

Pour vérifier la version de flask que vous exécutez, vous devez ouvrir Python dans le terminal et taper ce qui suit en conséquence:

flacon d'importation

flacon - version

Ly-Bach
la source

Désolé, mais pouvez-vous décrire exactement ce que vous avez fait? Je suis aux prises avec le même problème!

user3002996

0

La structure du projet Flask est différente. Comme vous l'avez mentionné en question, la structure du projet est la même mais le seul problème est l'esprit du dossier styles. Le dossier Styles doit se trouver dans le dossier statique.

static/styles/style.css

Gopi P
la source

0

Un point de plus à ajouter à ce fil.

Si vous ajoutez un trait de soulignement dans votre nom de fichier .css, cela ne fonctionnera pas.

SW Jeong
la source

0

Un autre point à ajouter.Avec les réponses aux votes positifs ci-dessus, veuillez vous assurer que la ligne ci-dessous est ajoutée au app.pyfichier:

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

Sinon, flask ne pourra pas détecter le dossier statique.

Sanjay Nandakumar
la source

0

Si l'une des méthodes ci-dessus ne fonctionne pas et que votre code est parfait, essayez de le rafraîchir en appuyant sur Ctrl + F5. Il effacera tous les chaces, puis rechargera le fichier. Cela a fonctionné pour moi.

Hackytech
la source

-8

Je suis presque sûr que c'est similaire au modèle Laravel, c'est ainsi que j'ai fait le mien.

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

Référence: problème de chemin de fichier CSS

Application flask simple qui lit son contenu à partir d'un fichier .html. La feuille de style externe est bloquée?

nCore
la source

2

Je ne vais pas vous voter mais pour votre édification, Laravel est PHP et Flask est Python. Ils ne fonctionnent pas de la même manière. Ils ont des structures de répertoires et des comportements très différents.

M. Concolato

pour importer des fichiers statiques, nous devons placer ces fichiers statiques dans un dossier statique. La structure de dossiers que vous avez donnée fonctionne avec un fichier HTML normal. mais pas avec Flask

Gopi P

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

Réponses: