web-dev-qa-db-ja.com

Flask Webアプリに関するCSSの問題

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

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

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

Flaskで動作させるために特別なことはありますか？

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

まとめると：FlaskでCSSを行うには-特別なpythonコードが必要ですか？

pythoncssflask
32
Rohit Rayudu

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）にFlask=プロジェクトディレクトリ内の構成済みの静的ディレクトリ（デフォルトではstatic/）を見つけてファイルのパスを返すように指示します。

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

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

実稼働環境では、Apacheまたはnginxを介して静的ファイルを提供するのが理想的ですが、これはdevには十分です。

56
Natan

これを行うための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フォルダーを「stylesheets」、ファイルを「styles」と呼ぶ場合：

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

これですべてが適切に設定されます。がんばろう！

6
Lee Ngo

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

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

実稼働環境では、Apacheまたはnginxを介して静的ファイルを提供するのが理想的ですが、これはdevには十分です。

5
Rachel Sanders

私の場合-macOS 10.13でのサファリ-キャッシュをクリアするとうまくいきました。

3
heimi

ハンドラーの順序が問題を引き起こす可能性があります。

  • url：/ stylesheets static_dir：スタイルシート
  • url：/.*スクリプト：helloworld.application

代わりに動作します

  • url：/.*スクリプト：helloworld.application
  • url：/ stylesheets static_dir：スタイルシート
0
George Nguyen