Проблема с работой css на сервере flask

Question

Итак, я хочу поднять серевер с помощью flask на heroku. Я сделал страницу html+css. Мне нужно изменить цвет фона страницы с помощью css. Когда я загружаю страницу в браузере, css не работает, хоть он также загрузился.

Страница сразу после загрузки

Тогда я иду в инструменты разработчика Chrome -> Источники, открываю файл css, нажимаю на значок цвета, далее на шестнадцатеричный код и Enter. Обратите внимание, я не меняю код цвета. Enter еще не нажал

Цвет страницы изменился, то есть я будто перезагрузил css, если я правильно понимаю:

Код Python:

import os
from flask import Flask, request, render_template
server = Flask(__name__)

@server.route('/', methods=['GET', 'POST'])
def webapp():
    return render_template("index.html", color='pink')

@server.route('/style.css', methods=['GET', 'POST'])
def css():
    return render_template("style.css")


if __name__ == "__main__":
    server.run(host="0.0.0.0", port=int(os.environ.get("PORT", 5000)))

Файл HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webapp</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
</body>
</html>

Файл CSS:

body {
    background-color: #9a9ac4;
}

Логи Heroku:

2022-09-09T10:12:14.919306+00:00 app[api]: Release v146 created by user [email protected]
2022-09-09T10:12:14.919306+00:00 app[api]: Deploy 7e67b664 by user [email protected]
2022-09-09T10:12:16.401613+00:00 heroku[web.1]: Restarting
2022-09-09T10:12:16.413429+00:00 heroku[web.1]: State changed from up to starting
2022-09-09T10:12:17.751403+00:00 heroku[web.1]: Starting process with command `python3 main.py`
2022-09-09T10:12:18.164787+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2022-09-09T10:12:18.612092+00:00 heroku[web.1]: Process exited with status 143
2022-09-09T10:12:18.979863+00:00 app[web.1]: * Serving Flask app 'main'
2022-09-09T10:12:18.979888+00:00 app[web.1]: * Debug mode: off
2022-09-09T10:12:18.981991+00:00 app[web.1]: WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
2022-09-09T10:12:18.981993+00:00 app[web.1]: * Running on all addresses (0.0.0.0)
2022-09-09T10:12:18.981993+00:00 app[web.1]: * Running on http://127.0.0.1:50981
2022-09-09T10:12:18.981993+00:00 app[web.1]: * Running on http://172.17.32.130:50981
2022-09-09T10:12:18.981994+00:00 app[web.1]: Press CTRL+C to quit
2022-09-09T10:12:19.000000+00:00 app[api]: Build succeeded
2022-09-09T10:12:19.406040+00:00 heroku[web.1]: State changed from starting to up
2022-09-09T10:12:28.371246+00:00 app[web.1]: 10.1.26.48 - - [09/Sep/2022 10:12:28] "GET / HTTP/1.1" 200 -
2022-09-09T10:12:28.372515+00:00 heroku[router]: at=info method=GET path="/" host=skinsforcases.herokuapp.com request_id=06d5205b-7f40-4cc4-892a-ca30e88b801d fwd="51.15.78.81" dyno=web.1 connect=0ms service=4ms status=200 bytes=491 protocol=https
2022-09-09T10:12:28.503082+00:00 app[web.1]: 10.1.26.48 - - [09/Sep/2022 10:12:28] "GET /style.css HTTP/1.1" 200 -
2022-09-09T10:12:28.504328+00:00 heroku[router]: at=info method=GET path="/style.css" host=skinsforcases.herokuapp.com request_id=688c0949-58e6-4364-a64e-b3093decccba fwd="51.15.78.81" dyno=web.1 connect=1ms service=2ms status=200 bytes=212 protocol=https

Мне нужно, чтобы css сразу действовал на страницу, если подвести итоги)

Я пробовал давать стили через js, все работает.

Абсолютно тот же результат на localhost.

Answer 1

Надо было в корне создать папку static, в нее в нее бросить этот css, а в html поставить вместо <link href="style.css" type="text/css" rel="stylesheet"> - <link href="{{ url_for('static', filename='style.css') }}" type="text/css" rel="stylesheet">. Наверное, такая уж особенность flask ?‍♂️

БЛОГ НА HUSL

Проблема с работой css на сервере flask

Ответы (1 шт):