Приложение не собирает файл .css(фляга/питон)

Я создаю шаблон, который я пытаюсь создать с помощью внешней таблицы стилей. Структура файла выглядит следующим образом.

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /styles
        - mainpage.css

mainpage.html выглядит следующим образом

<html>
    <head>
        <link rel= "stylesheet" type= "text/css" href= "../styles/mainpage.css">
    </head>
    <body>
        <!-- content -->

Ни один из моих стилей не применяется. Имеет ли это что-то общее с тем, что html является шаблоном, который я представляю? Python выглядит следующим образом.

return render_template("mainpage.html", variables..)

Я знаю, что это работает, потому что я все еще способен отображать шаблон. Однако, когда я попытался переместить мой код стиля из блока "style" в теге html "head" во внешний файл, все стили исчезли, оставив голую html-страницу. Кто-нибудь видит ошибки в моей файловой структуре?

Ответы

Ответ 1

У вас должна быть установлена ​​ "статическая" папка (для файлов css/js), если вы специально не переопределите ее во время инициализации фляжки. Я предполагаю, что вы не переопределили его.

Структура вашего каталога для css должна выглядеть следующим образом:

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css

Обратите внимание, что каталог /styles должен находиться под/статическим

Тогда сделайте это

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">

Флажок теперь будет искать файл css под static/styles/mainpage.css

Ответ 2

В шаблонах jinja2 (в этой фляге) используйте

href="{{ url_for('static', filename='mainpage.css')}}"

Файлы static обычно находятся в папке static, если не настроены иначе.

Ответ 3

Я прочитал несколько веток, и ни одна из них не устранила проблему, которую описывают люди, и я тоже столкнулся.

Я даже пытался отойти от conda и использовать pip, чтобы перейти на python 3.7, я попробовал все предложенное кодирование и ни одно из них не исправлено.

И вот почему (проблема):

по умолчанию python/flask выполняет поиск статического и шаблона в структуре папок, например:

/Users/username/folder_one/folder_two/ProjectName/src/app_name/<static>
 and 
/Users/username/folder_one/folder_two/ProjectName/src/app_name/<template>

Вы можете проверить это самостоятельно, используя отладчик Pycharm (или чего-либо еще), проверить значения в приложении (app = Flask (name)) и выполнить поиск teamplate_folder и static_folder.

чтобы это исправить, вы должны указать значения при создании приложения примерно так:

TEMPLATE_DIR = os.path.abspath('../templates')
STATIC_DIR = os.path.abspath('../static')

# app = Flask(__name__) # to make the app run without any
app = Flask(__name__, template_folder=TEMPLATE_DIR, static_folder=STATIC_DIR)

пути TEMPLATE_DIR и STATIC_DIR зависят от того, где находится файловое приложение. в моем случае, смотрите картинку, она находилась в папке под src.

Вы можете изменить шаблон и статические папки по своему желанию и зарегистрироваться в приложении = Flask...

По правде говоря, я начал испытывать проблему, когда возился с папкой и иногда работал иногда. это решает проблему раз и навсегда

HTML-код выглядит так:

<link href="{{ url_for('static', filename='libraries/css/bootstrap.css') }}" rel="stylesheet" type="text/css" >

Это код

Здесь структура папок

Ответ 4

Я сейчас использую колбу версии 1.0.2. Указанные выше файловые структуры не работают для меня, но я нашел такую, которая выглядит следующим образом:

     app_folder/ flask_app.py/ static/ style.css/ templates/
     index.html

(Обратите внимание, что "статические" и "шаблоны" - это папки, имена которых должны называться одинаково.)

Чтобы проверить версию колбы, которую вы используете, вы должны открыть Python в терминале и ввести следующее:

импортная колба

flask --version

Ответ 5

Структура проекта колбы отличается. Как вы упомянули в вопросе, структура проекта такая же, но единственная проблема с папкой стилей. Папка Styles должна находиться в статической папке.

static/styles/style.css