Доброго дня. Столкнулся вот с чем.
В шаблоне index.html подключил стили с помощью конструкции <link rel=»stylesheet» type=»text/css» href=»{{ url_for(‘static’, filename=’style.css’) }}»>
Но несмотря на то, что файл стилей лежал в нужной папочке по адресу /static/style.css — ничего не происходило.
Я попробовал подключить стиль от бутстрапа с помощью вот такой ссылки
<link rel=»stylesheet» href=»https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css» integrity=»sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u» crossorigin=»anonymous»>
И оно сработало. А свои стили — нет.
Случайно в консоли файерфокса увидел следующее сообщение: «Таблица стилей http://127.0.0.1:5000/static/main.css не была загружена, потому что её MIME-тип («application/x-css») не «text/css».
Оказывается, браузер неправильно распознаёт тип этого файла. Почему-то. То есть MIME-тип CSS-файла распознается не как «text/css», а как «application/x-css», а это — недопустимый MIME-тип для CSS. Поэтому стили не применяются к HTML-странице.
Чтобы исправить это, я задал MIME-тип CSS-файла в коде приложения Flask. Возможно, есть более хорошее решение, но я 3 часа искал, как это исправить, поэтому работает — и хорошо.
Для этого сначала дополнительно импортировал объект Response. Моя итоговая строка выглядела вот так: «from flask import Flask, render_template, Response».
И добавил вот такой маршрут:
@app.route(«/static/main.css»)
def css():
css_file = open(«static/main.css»).read()
resp = Response(css_file, mimetype=»text/css»)
return resp
После этого всё заработало.
Спасибо за внимание, надеюсь, вам это помогло!
С уважением, Александр Крылов.