Flask アプリが CSS ファイルを読み込まないのはなぜですか?

アプリケーションが .css ファイルを選択しない: Flask ファイル構造を変更するためのガイド

Flask アプリケーションで外部スタイル シートをスタイル設定するとき、スタイルが正常に適用されるようにするには、ファイルを適切に構造化する必要があります。スタイルが適用されていない場合は、ファイル構造を調整する必要がある可能性があります。

指定された例では、外部スタイル シートは /styles/mainpage.css にありますが、HTML テンプレートはそれを読み込もうとします。 ../styles/mainpage.css から。この間違ったパスにより、スタイルが適用されない可能性があります。

この問題を解決するには、アプリケーションの「静的」フォルダー内にスタイル シートを配置するようにファイル構造を変更する必要があります。更新されたファイル構造は次のようになります:

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

次に、CSS ファイルを正しく読み込むように HTML テンプレートを調整する必要があります:

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

この変更された HTML コードは url_for 関数を使用します。 CSS ファイルの正しい URL を動的に生成し、Flask が「静的」フォルダー内で CSS ファイルを見つけられるようにします。これらの変更を実装すると、レンダリングされたテンプレートに外部スタイルが適用されるようになります。

以上がFlask アプリが CSS ファイルを読み込まないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。