Je n'arrive pas à obtenir le code CSS correctement, mes pages Web ne sont pas stylées.
Ceci est mon lien dans tous mes modèles. Qu'est-ce que je fais mal?
<link type="text/css" rel="stylesheet" href="/stylesheets/style.css"/>
Y a-t-il quelque chose de spécial que j'ai à faire avec Flask pour le faire fonctionner?
Cela fait environ une demi-heure que j'essaie de changer des choses, mais je n'arrive pas à comprendre.
Pour résumer: comment faire CSS avec Flask - dois-je avoir un code python spécial?
Vous ne devriez pas avoir besoin de faire quelque chose de spécial avec Flask pour que CSS fonctionne. Peut-être que vous mettez style.css
dans flask_project/stylesheets/
? À moins d'être correctement configurés, ces répertoires ne seront pas servis par votre application. Consultez la section Fichiers statiques du Flask Quickstart pour plus d'informations à ce sujet. Mais, en résumé, voici ce que vous voudriez faire:
Déplacez les fichiers statiques dont vous avez besoin pour project_root/static/
. Supposons que vous avez déplacé stylesheets/style.css
dans project_root/static/stylesheets/style.css
.
Changement
<link ... href="/stylesheets/style.css" />
à
<link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />
Cela indique à l'analyseur de modèle (Jinja2) d'indiquer à Flask de rechercher le répertoire statique configuré dans votre répertoire de projet (par défaut, static/
) et de renvoyer le chemin du fichier.
/static/stylesheets/style.css
. Mais vous ne devriez vraiment pas faire cela - utiliser url_for
vous permet de changer de répertoire statique tout en maintenant le fonctionnement, entre autres avantages.Et, comme @RachelSanders l'a dit dans sa réponse:
En production, vous servirez idéalement vos fichiers statiques via Apache ou nginx, mais cela suffit pour dev.
4 étapes pour faire cela ((en construisant beaucoup sur certaines des autres réponses ici, en supposant que Flask soit correctement configuré):
1) Créez un dossier statique dans votre dossier app
: [root_folder]/app/static/
2) Déplacez tout votre contenu statique (images, JavaScript, CSS, etc.) dans ces dossiers. Conservez le contenu dans leurs dossiers respectifs (non obligatoire, simplement plus ordonnée et mieux organisée).
3) Modifiez votre fichier __init__.py
dans le dossier app
pour avoir cette ligne:
app.static_folder = 'static'
Cela permettra à votre application d'identifier votre dossier static
et de le lire en conséquence.
4) Dans votre code HTML, configurez vos liens de fichiers de la manière suivante:
<link ... href="{{ url_for('static', filename='[css_folder]/[css-file].css') }}" />
Par exemple, si vous appelez votre dossier CSS 'feuilles de style' et votre fichier 'styles':
<link ... href="{{ url_for('static', filename='stylesheets/styles.css') }}" />
Cela devrait tout mettre en place correctement. Bonne chance!
Vous devez créer un dossier appelé "statique" dans votre application Flask, puis y placer tous vos fichiers CSS.
http://flask.pocoo.org/docs/quickstart/#static-files
En production, vous servirez idéalement vos fichiers statiques via Apache ou nginx, mais cela suffit pour dev.
Dans mon cas - safari sur macOS 10.13 - effacer le cache a fait l'affaire.
L'ordre du gestionnaire pourrait causer les problèmes:
travaillera au lieu de