Warum erkennt meine Flask-Anwendung meine externe CSS-Datei nicht?-CSS-Tutorial-php.cn

Warum erkennt meine Flask-Anwendung meine externe CSS-Datei nicht?

Patricia Arquette

Freigeben： 2024-12-08 20:40:11

Original

810 Leute haben es durchsucht

Why Isn't My Flask Application Recognizing My External CSS File?

CSS-Datei in Flask-Anwendung nicht erkannt: Fehlerbehebung bei der Dateistruktur

Beim Versuch, eine Vorlage mithilfe einer externen CSS-Datei in Flask zu formatieren, ist dies der Fall Dies ist wichtig, um sicherzustellen, dass Ihre Dateistruktur korrekt ist. Wenn Ihre Stile nicht zutreffen, beachten Sie Folgendes:

Dateistruktur:

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

Nach dem Login kopieren

HTML-Markup:

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

Nach dem Login kopieren

Problem:

Ihre CSS-Datei befindet sich außerhalb der „statische“ Ordner, den Flask verwendet, um statische Dateien wie CSS und JavaScript bereitzustellen.

Lösung:

Um dieses Problem zu beheben, verschieben Sie Ihre CSS-Datei unter den „ „Static“-Ordner und aktualisieren Sie Ihre HTML-Datei entsprechend:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Erklärung:

Flask sucht nach statischen Dateien im Ordner „static“, sodass Sie CSS-Dateien bereitstellen können, ohne deren Datei verwalten zu müssen Pfade explizit angeben. Mit diesem Ansatz wendet Ihre Anwendung nun korrekt die in Ihrer externen Datei „mainpage.css“ definierten Stile an.

Das obige ist der detaillierte Inhalt vonWarum erkennt meine Flask-Anwendung meine externe CSS-Datei nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!