CSS Problèmes avec Flacon Web App

Je ne peux pas obtenir le CSS à la sortie correctement mes pages web sont tous non stylé.

C'est mon lien à tous mes modèles. Ce que je fais mal?

<link type="text/css" rel="stylesheet" href="/stylesheets/style.css"/>

Est-il quelque chose de spécial que j'ai à faire avec Flacon pour le faire fonctionner?

Je suis en train d'essayer et de changer les choses pour environ une demi-heure, mais n'arrive pas à obtenir ce droit.

Pour résumer: Comment faire des CSS avec Flacon - dois-je avoir le code python?

  • Vérifiez votre FireBug ou l'Inspecteur, êtes-vous d'obtenir un 404 not found sur ce fichier? Assurez-vous que le chemin d'accès correct.
  • Hmm aussi longtemps que il va encore entre le <head> balises qu'il devrait être ok. Est-il possible de voir le site sur lequel vous travaillez.
  • Ou comment à propos de la configuration d'un chemin absolu, je préfère ne pas les utiliser.
  • Apparemment Flacon besoins des feuilles de style pour être plus précisément dans une statique dossier - j'ai d'abord pensé que c'était facultatif et le site utilisé statique, comme un exemple, mais je ne crois pas.
InformationsquelleAutor Rohit Rayudu | 2012-12-07
  1. 55

    Vous ne devriez pas besoin de faire quelque chose de spécial avec Flacon pour obtenir CSS pour fonctionner. Vous êtes peut-être mettre style.css dans flask_project/stylesheets/? Sauf s'il est correctement configuré, ces annuaires ne sera pas servi par votre application. Découvrez la Les Fichiers Statiques section de la Flacon De Démarrage Rapide pour plus d'information sur cette. Mais, en résumé, c'est ce que vous aimeriez faire:

    1. Déplacer des fichiers statiques, vous devez project_root/static/. Supposons que vous avez déplacé stylesheets/style.css en project_root/static/stylesheets/style.css.

    2. Changement 

      <link ... href="/stylesheets/style.css" />

      à

      <link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />

      Cette raconte le modèle de l'analyseur (Jinja2) pour dire Flacon de trouver la configuration statique répertoire dans votre répertoire de projet (par défaut, static/) et retourne le chemin du fichier.

      • Si vous vraiment voulu, vous pouvez simplement définir le chemin d'accès comme /static/stylesheets/style.css. Mais vous ne devriez vraiment pas faire, à l'aide de url_for vous permet de passer votre répertoire statique et ont encore des choses à travailler, entre autres avantages.

    Et, comme @RachelSanders a dit dans sa réponse:

    Dans un environnement de production, vous feriez idéalement servir vos fichiers statiques via apache ou nginx, mais ce est assez bon pour les dev.

    • Je vous remercie beaucoup. Qui ont travaillé. 🙂
    InformationsquelleAutor Natan
  2. 6

    4 étapes pour ce faire (bâtiment beaucoup sur certains des autres réponses ici, en supposant que vous avez obtenu Flacon de tout mettre en place correctement):

    1) Créer un statique dossier dans votre app dossier:[root_folder]/app/static/

    2) Déplacer l'ensemble de votre contenu statique (images, JavaScript, CSS, etc.) dans ces dossiers. Garder le contenu de leurs dossiers respectifs (pas obligatoire, juste plus propres et plus organisés).

    3) Modifier votre __init__.py fichier dans le app dossier pour avoir cette ligne:

    app.static_folder = 'static'

    Cela permettra à votre application pour identifier votre static dossier et de le lire en conséquence.

    4) Dans votre code HTML, mettre en place des liens vers des fichiers en tant que tel:

    <link ... href="{{ url_for('static', filename='[css_folder]/[css-file].css') }}" />

    Par exemple, si vous appelez votre CSS dossier "feuilles de style" et le fichier "styles":

    <link ... href="{{ url_for('static', filename='stylesheets/styles.css') }}" />

    Qui devrait mettre tout en place correctement. Bonne chance!

    InformationsquelleAutor Lee Ngo
  3. 5

    Vous devez créer un dossier appelé "statique" à l'intérieur de votre ballon d'application, puis mettez tous vos fichiers CSS là.

    http://flask.pocoo.org/docs/quickstart/#static-files

    Dans un environnement de production, vous feriez idéalement servir vos fichiers statiques via apache ou nginx, mais ce est assez bon pour les dev.

    InformationsquelleAutor Rachel Sanders
  4. 3

    Dans mon cas - safari sur mac os 10.13 - videz le cache, a fait le tour.

    InformationsquelleAutor heimi
  5. 0

    L'ordre du gestionnaire peut causer des problèmes: la

    • url: /feuilles de style
      static_dir: les feuilles de style
    • url: /.*
      script: helloworld.application

    va travailler au lieu de

    • url: /.*
      script: helloworld.application
    • url: /feuilles de style
      static_dir: les feuilles de style
    InformationsquelleAutor George Nguyen