Anwendung nimmt keine CSS-Datei auf (Flasche / Python)

111

Ich rendere eine Vorlage, die ich mit einem externen Stylesheet zu stylen versuche. Die Dateistruktur ist wie folgt.

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.html sieht so aus

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

Keiner meiner Stile wird jedoch angewendet. Hat das etwas damit zu tun, dass das HTML eine Vorlage ist, die ich rendere? Die Python sieht so aus.

return render_template("mainpage.html", variables..)

Ich weiß, dass so viel funktioniert, weil ich die Vorlage immer noch rendern kann. Als ich jedoch versuchte, meinen Styling-Code von einem "Style" -Block innerhalb des HTML-Tags "head" in eine externe Datei zu verschieben, verschwand das gesamte Styling und hinterließ eine leere HTML-Seite. Hat jemand Fehler mit meiner Dateistruktur gesehen?

python html css templates flask Zack
quelle

224

Sie benötigen ein 'statisches' Ordner-Setup (für CSS / JS-Dateien), es sei denn, Sie überschreiben es während der Flask-Initialisierung ausdrücklich. Ich gehe davon aus, dass Sie es nicht überschrieben haben.

Ihre Verzeichnisstruktur für CSS sollte wie folgt aussehen:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

Beachten Sie, dass sich Ihr Verzeichnis / styles unter / static befinden sollte

Dann mach das

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">

Flask sucht nun unter static / styles / mainpage.css nach der CSS-Datei

Codegeek
quelle

4

Dies sollte als Antwort gekennzeichnet werden. Diese Lösung hat bei mir funktioniert, wenn nicht bei Ihnen, bitten Sie uns, Ihnen zu helfen. Andernfalls kennzeichnen Sie es. @ Zack

Shahryar Saljoughi

2

Warum wurde dies nicht als die richtige Antwort markiert? Es sollte sein.

Pfabri

1

Entschuldigung, ich habe vergessen, zu diesem zurückzukehren :) Der statische Ordner war definitiv der richtige Weg

Zack

Fügen Sie für Javascript eine Skriptdatei zum statischen Ordner hinzu. <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

28.

17

Verwenden Sie in jinja2-Vorlagen (die von der Flasche verwendet werden)

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

Die staticDateien befinden sich jedoch normalerweise im staticOrdner, sofern nicht anders konfiguriert.

njzk2
quelle

1

Dies gibt mir leider einen Fehler. BuildError: ('mainpage.css', {}, None)

Zack

5

Ich habe mehrere Threads gelesen und keiner von ihnen hat das Problem behoben, das die Leute beschreiben, und ich habe es auch erlebt.

Ich habe sogar versucht, mich von conda zu entfernen und pip zu verwenden, um auf Python 3.7 zu aktualisieren. Ich habe alle vorgeschlagenen Codierungen ausprobiert und keine davon behoben.

Und hier ist warum (das Problem):

Standardmäßig durchsuchen Python / Flask die Statik und die Vorlage in einer Ordnerstruktur wie:

/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
 and 
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>

Sie können dies selbst mit dem Debugger auf Pycharm (oder einem anderen Element) überprüfen, die Werte in der App überprüfen (app = Flask ( Name )) und nach teamplate_folder und static_folder suchen

Um dies zu beheben, müssen Sie die Werte beim Erstellen der App wie folgt angeben:

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)

Der Pfad TEMPLATE_DIR und STATIC_DIR hängt davon ab, wo sich die Datei-App befindet. In meinem Fall, siehe Bild, befand es sich in einem Ordner unter src.

Sie können die Vorlage und die statischen Ordner nach Ihren Wünschen ändern und sich in der App = Flask ... registrieren.

In Wahrheit habe ich das Problem beim Herumspielen mit Ordnern festgestellt und manchmal auch nicht gearbeitet. Dies behebt das Problem ein für alle Mal

Der HTML-Code sieht folgendermaßen aus:

<link href="{{ url_for('static', filename='libraries/css/bootstrap.css') }}" rel="stylesheet" type="text/css" >

Dies ist der Code

Hier die Struktur der Ordner

Stefano Tuveri
quelle

1

Ich verwende gerade Version 1.0.2 von flask. Die obigen Dateistrukturen haben bei mir nicht funktioniert, aber ich habe eine gefunden, die wie folgt funktioniert:

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

(Bitte beachten Sie, dass 'statisch' und 'Vorlagen' Ordner sind, die genau den gleichen Namen haben sollten.)

Um zu überprüfen, welche Version der Flasche Sie ausführen, sollten Sie Python im Terminal öffnen und Folgendes entsprechend eingeben:

Kolben importieren

Kolbenversion

Ly-Bach
quelle

Entschuldigung, aber können Sie bitte genau beschreiben, was Sie getan haben? Ich kämpfe mit dem gleichen Problem!

user3002996

1

Haben Sie immer noch Probleme, nachdem Sie die von codegeek bereitgestellte Lösung befolgt haben :
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?

In Google Chrome werden durch Drücken der Schaltfläche zum erneuten Laden (F5) die statischen Dateien nicht neu geladen. Wenn Sie der akzeptierten Lösung gefolgt sind, aber die an CSS vorgenommenen Änderungen immer noch nicht sehen, drücken Sie ctrl + shift + R, um zwischengespeicherte Dateien zu ignorieren und die statischen Dateien neu zu laden.

In Firefox wird durch Drücken der Schaltfläche zum erneuten Laden die statischen Dateien neu geladen.

Wenn Sie in Edge die Schaltfläche Aktualisieren drücken, wird die statische Datei nicht neu geladen. Durch Drücken ctrl + shift + Rvon werden zwischengespeicherte Dateien ignoriert und die statischen Dateien neu geladen. Dies funktioniert jedoch nicht auf meinem Computer.

Christian Johansen
quelle

0

Die Kolbenprojektstruktur ist unterschiedlich. Wie Sie in Frage gestellt haben, ist die Projektstruktur dieselbe, aber das einzige Problem ist der Stilordner. Der Ordner "Stile" muss sich im statischen Ordner befinden.

static/styles/style.css

Gopi P.
quelle

0

Ein weiterer Punkt, den Sie diesem Thread hinzufügen sollten.

Wenn Sie Ihrem CSS-Dateinamen einen Unterstrich hinzufügen, funktioniert dies nicht.

SW Jeong
quelle

0

Noch ein Punkt zum Hinzufügen. Stellen Sie neben den oben genannten Antworten sicher, dass die folgende Zeile zur app.pyDatei hinzugefügt wird:

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

Andernfalls kann der Kolben keinen statischen Ordner erkennen.

Sanjay Nandakumar
quelle

0

Wenn eine der oben genannten Methoden nicht funktioniert und Ihr Code perfekt ist, versuchen Sie eine Aktualisierung, indem Sie Strg + F5 drücken. Es werden alle Chaces gelöscht und die Datei neu geladen. Es hat bei mir funktioniert.

Hackytech
quelle

-8

Ich bin mir ziemlich sicher, dass es der Laravel-Vorlage ähnlich ist. So habe ich meine gemacht.

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

Weitergeleitet: CSS-Dateipfadproblem

Einfache Kolbenanwendung, die ihren Inhalt aus einer HTML-Datei liest. Externes Stylesheet blockiert?

nKern
quelle

2

Laravel ist PHP und Flask ist Python. Sie arbeiten nicht auf ähnliche Weise. Sie haben sehr unterschiedliche Verzeichnisstrukturen und Verhaltensweisen.

Herr Concolato

Um statische Dateien zu importieren, müssen wir diese statischen Dateien in einem statischen Ordner ablegen. Die von Ihnen angegebene Ordnerstruktur funktioniert mit einer normalen HTML-Datei. aber nicht mit Flask

Gopi P

Anwendung nimmt keine CSS-Datei auf (Flasche / Python)

Antworten: