Доброго дня. Столкнулся вот с чем.
В шаблоне 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".
И добавил вот такой маршрут (уберите подчёркивания, если будете использовать код — просто пробелы не ставятся) для файла main.css:
@app.route("/static/main.css")
def css():
____css_file = open("static/main.css").read()
____resp = Response(css_file, mimetype="text/css")
____return resp
После этого всё заработало.
Спасибо за внимание, надеюсь, вам это помогло!
С уважением, Александр Крылов.