web-dev-qa-db-fra.com

Problèmes CSS avec Flask Web App

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?

pythoncssflask
28
Rohit Rayudu

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:

  1. 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.

  2. 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.

    • Si vous vraiment le vouliez, vous pouvez simplement définir le chemin comme /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.

49
Natan

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!

5
Lee Ngo

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.

5
Rachel Sanders

Dans mon cas - safari sur macOS 10.13 - effacer le cache a fait l'affaire.

3
heimi

L'ordre du gestionnaire pourrait causer les problèmes:

  • url: /stylesheetsstatic_dir: stylesheets
  • url: /.*script: helloworld.application

travaillera au lieu de

  • url: /.*script: helloworld.application
  • url: /stylesheetsstatic_dir: stylesheets
0
George Nguyen