wake-up-neo.com

CSS-Probleme mit Flask Web App

Ich kann das CSS nicht richtig ausgeben - meine Webseiten sind alle nicht gestylt.

Dies ist mein Link in allen meinen Vorlagen. Was mache ich falsch?

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

Gibt es etwas Besonderes, das ich mit Flask zu tun habe, damit es funktioniert?

Ich habe ungefähr eine halbe Stunde versucht und Dinge geändert, aber es scheint nicht richtig zu sein.

Um es auf den Punkt zu bringen: Wie machst du CSS mit Flask? Muss ich speziellen Python-Code haben?

28
Rohit Rayudu

Sie sollten mit Flask nichts Besonderes tun müssen, damit CSS funktioniert. Vielleicht setzen Sie style.css in flask_project/stylesheets/ ein? Solche Verzeichnisse werden von Ihrer Anwendung nicht bereitgestellt, wenn sie nicht ordnungsgemäß konfiguriert sind. Weitere Informationen hierzu finden Sie im Abschnitt Static Files des Flask Quickstart . Zusammenfassend möchten Sie Folgendes tun:

  1. Verschieben Sie statische Dateien nach project_root/static/. Nehmen wir an, Sie haben stylesheets/style.css in project_root/static/stylesheets/style.css verschoben.

  2. Veränderung 

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

    zu

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

    Dadurch wird der Vorlagenparser (Jinja2) angewiesen, Flask anzuweisen, das konfigurierte statische Verzeichnis in Ihrem Projektverzeichnis zu finden (standardmäßig static/) und den Pfad der Datei zurückzugeben.

    • Wenn Sie wirklich möchten, können Sie den Pfad einfach als /static/stylesheets/style.css festlegen. Aber Sie sollten das wirklich nicht tun - mit url_for können Sie Ihr statisches Verzeichnis wechseln und trotzdem unter anderem Vorteile haben.

Und, wie @RachelSanders in ihrer Antwort sagte:

In einer Produktionsumgebung würden Sie Ihre statischen Dateien idealerweise über Apache oder Nginx bereitstellen. Dies ist jedoch gut genug für Entwickler.

49
Natan

4 Schritte, um dies zu tun (Ich baue viel auf einige der anderen Antworten hier auf, vorausgesetzt du hast Flask alle richtig eingerichtet):

1) Erstellen Sie einen statischen Ordner in Ihrem app-Ordner: [root_folder]/app/static/

2) Verschieben Sie Ihren gesamten statischen Inhalt (Bilder, JavaScript, CSS usw.) in diese Ordner. Bewahren Sie den Inhalt in den entsprechenden Ordnern auf (nicht zwingend, nur übersichtlicher und übersichtlicher).

3) Ändern Sie Ihre __init__.py-Datei im Ordner app, um diese Zeile zu erhalten:

app.static_folder = 'static'

Dadurch kann Ihre App Ihren static-Ordner identifizieren und entsprechend lesen.

4) Richten Sie Ihre Dateilinks in Ihrem HTML-Code wie folgt ein:

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

Wenn Sie beispielsweise Ihren CSS-Ordner "Stylesheets" und Datei "Styles" aufrufen:

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

Das sollte alles richtig einrichten. Viel Glück!

5
Lee Ngo

Sie müssen einen Ordner mit dem Namen "static" in Ihrer Flask-App erstellen und dann alle Ihre CSS-Dateien dort ablegen.

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

In einer Produktionsumgebung würden Sie Ihre statischen Dateien idealerweise über Apache oder Nginx bereitstellen. Dies ist jedoch ausreichend für dev.

5
Rachel Sanders

In meinem Fall - Safari auf MacOS 10.13 - löschte der Cache den Trick.

3
heimi

Die Reihenfolge des Handlers kann die Probleme verursachen:

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

wird statt arbeiten

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