60

CSSを正しく出力できません-私のWebページはすべてスタイルが設定されていません。

これは私のすべてのテンプレートのリンクです。私は何が間違っているのですか？

<link type="text/css" rel="stylesheet" href="/stylesheets/style.css"/>

Flaskを機能させるためにFlaskと関係がある特別なことはありますか？

私は30分ほど物事を変えようとしてきましたが、うまくいかないようです。

要約すると、FlaskでCSSをどのように実行しますか？特別なPythonコードが必要ですか？

4

11 に答える 11

93

CSSを機能させるために、Flaskで特別なことをする必要はありません。多分あなたは入れstyle.cssていflask_project/stylesheets/ますか？適切に構成されていない限り、そのようなディレクトリはアプリケーションによって提供されません。詳細については、 Flaskクイックスタートの静的ファイルのセクションを確認してください。しかし、要約すると、これはあなたがやりたいことです：

  1. 必要な静的ファイルを移動しますproject_root/static/。stylesheets/style.cssに移動したとしましょうproject_root/static/stylesheets/style.css。

  2. 変化する 

    <link ... href="/stylesheets/style.css" />

    に

    <link ... href="{{ url_for('static', filename='stylesheets/style.css') }}" />

    これにより、テンプレートパーサー（Jinja2）は、プロジェクトディレクトリ（デフォルトではstatic/）で構成された静的ディレクトリを検索し、ファイルのパスを返すようにFlaskに指示します。

    • 本当に必要な場合は、パスをとして設定できます/static/stylesheets/style.css。しかし、実際にはそうすべきではありません。を使用url_forすると、静的ディレクトリを切り替えても、他の利点の中でも特に機能することができます。

そして、@RachelSandersが彼女の答えで言ったように：

本番環境では、apacheまたはnginxを介して静的ファイルを提供するのが理想的ですが、開発者にとってはこれで十分です。

于 2012-12-08T00:50:42.050 に答える
62

を使用してクロムをリロードしてみてください

Ctrl + Shift + R

于 2019-12-14T04:22:44.653 に答える
19

これを行うための4つのステップ（Flaskがすべて適切にセットアップされていることを前提として、ここで他のいくつかの回答に基づいて多くを構築します）：

1）フォルダに静的フォルダを作成しappます。[root_folder]/app/static/

2）すべての静的コンテンツ（画像、JavaScript、CSSなど）をこれらのフォルダーに移動します。コンテンツをそれぞれのフォルダに保存します（必須ではなく、すっきりと整理されています）。

3）フォルダ内__init__.pyのファイルを次の行になるように変更します。app

app.static_folder = 'static'

これにより、アプリはstaticフォルダーを識別し、それに応じて読み取ることができます。

4）HTMLで、ファイルリンクを次のように設定します。

<link ... href="{{ url_for('static', filename='[css_folder]/[css-file].css') }}" />

たとえば、CSSフォルダを「スタイルシート」およびファイル「スタイル」と呼ぶ場合、次のようになります。

<link ... href="{{ url_for('static', filename='stylesheets/styles.css') }}" />

これですべてが正しく設定されます。幸運を！

于 2016-06-22T06:59:49.740 に答える
9

Flaskアプリ内に「static」というフォルダーを作成し、そこにすべてのCSSファイルを配置する必要があります。

http://flask.pocoo.org/docs/quickstart/#static-files

本番環境では、apacheまたはnginxを介して静的ファイルを提供するのが理想的ですが、開発者にとってはこれで十分です。

于 2012-12-08T00:43:27.913 に答える
3

私の場合（macOS 10.13のsafari）、キャッシュをクリアすることでうまくいきました。

于 2018-04-03T08:44:49.923 に答える
3

ctrl + shift + Rトリックは、特に最初の実行中にcssがロードされた場合に機能します（つまり、すべてのパスが正常です）。ただし、cssに変更が加えられた場合はリロードできません。

于 2020-08-10T17:21:24.683 に答える
2

ブラウザでハードリフレッシュを実行してみてください。キャッシュされたバージョンを見ている可能性があります。Ctrlキーを押しながらFirefoxでF5キーを押します。

于 2020-02-11T16:11:24.180 に答える
2

CSSを配置した静的フォルダーを作成し、適切にリンクしましたが、機能しませんでした。ブラウザのキャッシュをクリアしましたが、機能しました。Ctrlまたは、Chromeで+を押してブラウザをハードリフレッシュすることもできますF5。

于 2020-04-29T12:05:16.337 に答える
2

（mac OS）を使用した単純なハードリフレッシュ：

command + shift + R
于 2020-07-27T21:11:14.213 に答える
1

「静的ファイルを変更した場合は、ブラウザページを更新してください。変更が表示されない場合は、ブラウザのキャッシュをクリアしてみてください。」-Flaskドキュメント

于 2020-05-01T19:59:01.860 に答える
0

ハンドラーの順序によって問題が発生する可能性があります。

  • url：/ stylesheets static_dir：stylesheets
  • url：/.*スクリプト：helloworld.application

の代わりに動作します

  • url：/.*スクリプト：helloworld.application
  • url：/ stylesheets static_dir：stylesheets
于 2014-10-09T16:31:31.920 に答える