アプリケーションが.cssファイルを取得しない（flask / python）

112

テンプレートをレンダリングしていますが、外部スタイルシートでスタイルを設定しようとしています。ファイル構成は以下の通りです。

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

mainpage.htmlは次のようになります

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

私のスタイルはどれも適用されていません。それはhtmlが私がレンダリングしているテンプレートであるという事実と関係がありますか？Pythonは次のようになります。

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

まだテンプレートをレンダリングできるので、これだけが機能していることがわかります。ただし、HTMLの「head」タグ内の「スタイル」ブロックから外部ファイルにスタイリングコードを移動しようとすると、すべてのスタイリングがなくなり、HTMLページのみが残りました。誰かが私のファイル構造でエラーを見ますか？

python  html  css  templates  flask 
— ザック
ソース

回答:

224

Flaskの初期化中に明示的にオーバーライドしない限り、「静的」フォルダー設定（css / jsファイル用）が必要です。あなたはそれを上書きしなかったと思います。

cssのディレクトリ構造は次のようになります。

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

/ stylesディレクトリが/ staticの下にあることに注意してください

次に、これを行います

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

Flaskはstatic / styles / mainpage.cssでcssファイルを探します。

— codegeek
ソース
4
これには回答としてフラグを立てる必要があります。この解決策は私にとってはうまくいきましたが、うまくいかなかった場合は、私たちに助けを求めてください。それ以外の場合はフラグを立てます。@zack
— Shahryar Saljoughi 2017
2
なぜこれが正解としてマークされていないのですか？そのはず。
— -pfabri
1
申し訳ありませんが、これに戻るのを忘れていました:)静的フォルダーは間違いなく進むべき道でした
— Zack
JavaScriptの場合、スクリプトファイルを静的フォルダに追加します。 <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>
— HArは
17

jinja2テンプレート（フラスコが使用）では、

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

staticファイルは通常ありstatic特に構成されていない限り、しかし、フォルダ。

— njzk2
ソース
1
残念ながら、これによりエラーが発生します。BuildError：（ 'mainpage.css'、{}、None）
— Zack
6

私は複数のスレッドを読みましたが、それらのどれもが人々が説明している問題を修正しておらず、私も経験しました。

私はcondaから離れてpipを使ってpython 3.7にアップグレードしようとしましたが、提案されたすべてのコーディングを試しましたが、どれも修正されていません。

そしてここに理由があります（問題）：

デフォルトでは、python / flaskは静的およびテンプレートを次のようなフォルダー構造で検索します。 

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

Pycharm（またはその他）のデバッガーを使用して自分で確認し、アプリ（app = Flask（name））の値を確認してteamplate_folderとstatic_folderを検索できます

これを修正するには、次のようなアプリを作成するときに値を指定する必要があります。 

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)

パスTEMPLATE_DIRおよびSTATIC_DIRは、ファイルアプリの場所によって異なります。私の場合、写真を参照してください。それはsrcの下のフォルダー内にありました。

テンプレートと静的フォルダーを必要に応じて変更し、アプリに登録することができます= Flask ...

実は、フォルダをいじり回すと問題が発生し始め、うまくいかない場合もあります。これで問題が一気に解決します

HTMLコードは次のようになります。 

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

これはコード

ここで、フォルダの構造

— ステファノ・トゥベリ
ソース
2

codegeekが提供する解決策を実行しても問題が解決しない場合：
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">ん。

ではGoogle Chromeのリロードボタン（F5）を押すと、静的ファイルを再ロードしません。承認されたソリューションに従っても、CSSに加えた変更が表示されない場合は、ctrl + shift + Rてキャッシュされたファイルを無視し、静的ファイルをリロードします。

ではFirefoxのリロードボタンを押すと、静的なファイルをリロードするように見えます。

ではエッジリフレッシュボタンを押すと、静的ファイルを再ロードしません。押すctrl + shift + Rと、キャッシュされたファイルが無視され、静的ファイルが再ロードされます。ただし、これは私のコンピューターでは機能しません。

— クリスチャン・ヨハンセン
ソース
Google Chrome（Ctrl + Shift + R）で私の問題を解決してくれてありがとう。キャッシュされたファイルを自動的に無視する方法はありますか？
— アレクシス
1

現在、フラスコのバージョン1.0.2を実行しています。上記のファイル構造は私にとってはうまくいきませんでしたが、うまくいくものを見つけました、それは以下の通りです：

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

（「静的」と「テンプレート」はフォルダであり、まったく同じ名前にする必要があることに注意してください。）

実行しているフラスコのバージョンを確認するには、ターミナルでPythonを開き、それに応じて次のように入力します。

輸入フラスコ

フラスコ-バージョン

— ライバッハ
ソース
申し訳ありませんが、あなたがしたことを正確に説明していただけますか？同じ問題に悩んでいます！
— user3002996 2018年
0

フラスコプロジェクトの構造が異なります。質問で述べたように、プロジェクトの構造は同じですが、唯一の問題はスタイルフォルダーです。Stylesフォルダーは静的フォルダー内にある必要があります。

static/styles/style.css
— Gopi P
ソース
0

このスレッドに追加するもう1つのポイント。

.cssファイル名にアンダースコアを追加すると、機能しません。

— SWジョン
ソース
0

追加するもう1つのポイント：上記の投票された回答に加えて、以下の行がapp.pyファイルに追加されていることを確認してください：

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

そうしないと、フラスコは静的フォルダーを検出できません。

— サンジャイナンダクマール
ソース
0

上記の方法のいずれかが機能せず、コードが完全な場合は、Ctrl + F5を押してハードリフレッシュを試みます。それはすべての状況をクリアしてからファイルをリロードします。それは私のために働いた。

— ハッキーテック
ソース
-8

私はそれがLaravelテンプレートに似ていると確信しています。これが私のやり方です。

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

参照： CSSファイルのパスの問題

.htmlファイルからコンテンツを読み取る単純なフラスコアプリケーション。外部スタイルシートがブロックされていますか？

— nCore
ソース
2
反対票を投じるつもりはありませんが、参考までに、LaravelはPHP、FlaskはPythonです。それらは同じように機能しません。彼らは非常に異なるディレクトリ構造と動作を持っています。
— Mr. Concolato 2017年
静的ファイルをインポートするには、それらの静的ファイルを静的フォルダーに配置する必要があります。指定したフォルダ構造は、通常のHTMLファイルで機能します。Flaskではありません
— Gopi P
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.