Flask не видит css файл подключенные к html шаблону, что делать?
ОТВЕТ:
Во всем интернете не было информации по этому поводу, что достаточно странно, или я просто не умею гуглить
Следует добавить во фласк строку
static_path = os.path.join(project_root, ‘../client/static’)
А app перезаписать как
app = Flask(__name__, template_folder=template_path, static_folder=static_path)
Все заработало
При попытке подключить css файл к html, используя Flask, он просто не находится.
404
Подключаю не просто так
+
Мб дело в том, что для того чтобы подключить html к Flask я так же прописывал
import os
import sys
project_root = os.path.dirname(__file__)
template_path = os.path.join(project_root, ‘../client’)
app = Flask(__name__, template_folder=template_path)
- Вопрос задан более трёх лет назад
- 6492 просмотра
Неправильно подключается статический CSS файл к Flask
У меня возникла странная ситуация. Я создал простое приложение на Flask и решил попробовать подключить к нему CSS файл. Создал папку static добавил туда css файл. Вот содержимое файла:
body
Все работало, весь текст приобрел красный цвет. Затем я изменил содержимое этого файла
body
Я сохранил файл, перезапустил сервер, обновил сайт, но он остался таким каким был. После этого я вообще удалил все из CSS файла, сохранил его, перезапустил сервер, обновил сайт, но там все так-же был красный цвет! Кто знает почему при изменении CSS файла он как-будто не меняется?
Шаг 7: Добавление стиля¶
Теперь, когда всё остальное работает, пришло время, чтобы придать приложению немного стиля. Просто создайте в папке static , которую мы создавали до этого, таблицу стилей, в файле с именем style.css :
body font-family: sans-serif; background: #eee; > a, h1, h2 color: #377ba8; > h1, h2 font-family: 'Georgia', serif; margin: 0; > h1 border-bottom: 2px solid #eee; > h2 font-size: 1.2em; > .page margin: 2em auto; width: 35em; border: 5px solid #ccc; padding: 0.8em; background: white; > .entries list-style: none; margin: 0; padding: 0; > .entries li margin: 0.8em 1.2em; > .entries li h2 margin-left: -1em; > .add-entry font-size: 0.9em; border-bottom: 1px solid #ccc; > .add-entry dl font-weight: bold; > .metanav text-align: right; font-size: 0.8em; padding: 0.3em; margin-bottom: 1em; background: #fafafa; > .flash background: #cee5F5; padding: 0.5em; border: 1px solid #aacbe2; > .error background: #f0d6d6; padding: 0.5em; >
#9 Работа со статическими файлами во Flask
Статические файлы — это файлы, которые не изменяются часто. Это, например, файлы CSS, JavaScript, шрифты и так далее. По умолчанию Flask ищет статические файлы в папке static , которая хранится в папке приложения. Это поведение можно поменять, передав аргументу-ключевому слову static_folder название новой папки при создании экземпляра приложения:
app = Flask(__name__, static_folder="static_dir") Это изменит расположение статических файлов по умолчанию на папку static_dir внутри папки приложения.
Пока что можно остановиться на папке по умолчанию, statiс . Сперва нужно создать папку static в папке flask_app . В static создаем CSS-файл style.css со следующим содержимым.
body color: red > Стоит вспомнить, что в уроке «Основы Flask» речь шла о том, что Flask автоматически добавляет путь в формате /static/ для обработки статических файлов. Поэтому все, что остается — создать URL с помощью функции url_for() :
script src token property">url_for('static', filename='jquery.js') >>">script> script src="/static/jquery.js">script> Дальше необходимо открыть шаблон index.html и добавить тег :
html lang="en"> head> meta charset="UTF-8"> title>Titletitle> link rel="stylesheet" href token property">url_for('static', filename='style.css') >>"> head> . Если сервер не запущен, его нужно запустить и открыть https://localhost:5000/ . Там будет страница с красным текстом:
Этот метод работы со статическими файлов подходит только для разработки. При создании реальных приложений используются реальные веб-сервера, такие как Nginx или Apache.
- ТЕГИ
- Flask
- Уроки по Flask на русском