Flask アプリケーションが外部 CSS ファイルを認識しないのはなぜですか?-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Flask アプリケーションが外部 CSS ファイルを認識しないのはなぜですか?

Patricia Arquette

Dec 08, 2024 pm 08:40 PM

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

CSS ファイルが Flask アプリケーションで認識されない: ファイル構造のトラブルシューティング

Flask で外部 CSS ファイルを使用してテンプレートをスタイルしようとすると、ファイル構造が正しいことを確認するために不可欠です。スタイルが適用されない場合は、次の点を考慮してください:

ファイル構造:

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

ログイン後にコピー

HTMLマークアップ:

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

ログイン後にコピー

問題:

CSS ファイルは、Flask が CSS などの静的ファイルを提供するために使用する「静的」フォルダーの外にあります。そしてJavaScript.

解決策:

これを解決するには、CSS ファイルを「static」フォルダーに移動し、HTML ファイルを更新します。したがって:

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

ログイン後にコピー

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

ログイン後にコピー

説明:

Flask は「static」フォルダーの下で静的ファイルを検索するため、ファイルを管理せずに CSS ファイルを提供できるようになります。パスを明示的に指定します。このアプローチを使用すると、アプリケーションは外部の「mainpage.css」ファイルで定義されたスタイルを正しく適用できるようになります。

以上がFlask アプリケーションが外部 CSS ファイルを認識しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。