Проблемы CSS с веб-приложением Flask

Я не могу заставить CSS корректно выводить - мои веб-страницы все не сработали.

Это моя ссылка во всех моих шаблонах. Что я делаю не так?

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

Есть ли что-то особенное, что я должен делать с Flask, чтобы заставить его работать?

Я пытаюсь и меняю вещи примерно на полчаса, но, похоже, не все правильно.

Подводя итог: как вы делаете CSS с Flask - должен ли я иметь какой-либо специальный код на Python?

ОТВЕТЫ

Ответ 1

Вам не нужно ничего делать с Flask, чтобы заставить CSS работать. Возможно, вы style.css в flask_project/stylesheets/? Если они не настроены правильно, такие каталоги не будут обслуживаться вашим приложением. Посмотрите раздел " Статические файлы " в " Быстрый старт" для получения дополнительной информации об этом. Но, в общем, это то, что вы хотели бы сделать:

  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.

Ответ 2

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') }}" />

Это должно правильно настроить все. Удачи!

Ответ 3

Вам нужно создать папку под названием "static" внутри вашего приложения Flask, а затем поместить туда все ваши файлы CSS.

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

В настройках производства вы идеально обслуживаете свои статические файлы через apache или nginx, но это достаточно хорошо для dev.

Ответ 4

В моем случае - сафари на macOS 10.13 - очистка кеша сделала трюк.

Ответ 5

Порядок обработчика может вызвать проблемы:

  • url: /stylesheets static_dir: stylesheets
  • url:/.* script: helloworld.application

будет работать вместо

  • url:/.* script: helloworld.application
  • url: /stylesheets static_dir: stylesheets

Ответ 6

введите описание изображения здесь

Привет, у меня возникла проблема с CSS, и я использую эту ссылку:

<head>
<title>Flask App</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>

Я не понимаю, почему это не работает.

Спасибо !