Приложение не загружает файл .css (flask / python)

114

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

/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 - это шаблон, который я визуализирую? Питон выглядит так.

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

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

python html css templates flask Зак
источник

231

Вам необходимо настроить «статическую» папку (для файлов css / js), если вы специально не переопределите ее во время инициализации Flask. Я предполагаю, что вы не отменяли это.

Ваша структура каталогов для css должна быть такой:

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

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

Затем сделайте это

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

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

Codegeek
источник

4

Это должно быть отмечено как ответ. Это решение сработало для меня, если не для вас, сообщите нам, чтобы мы помогли. В противном случае отметьте это. @zack

Шахрияр Салджуги

2

Почему этот ответ не был отмечен как правильный? Так должно быть.

pfabri

1

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

Zack

1

для Javascript добавить файл сценария в статическую папку. <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

HAr

17

В шаблонах jinja2 (которые использует флакон) используйте

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

Однако staticфайлы обычно находятся в staticпапке, если не указано иное.

njzk2
источник

1

К сожалению, это дает мне ошибку. BuildError: ('mainpage.css', {}, None)

Зак,

6

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

Я даже попытался отойти от 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.

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

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

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

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

Это код

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

Стефано Тувери
источник

2

По-прежнему возникают проблемы после решения, предоставленного codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}"> ?

В Google Chrome нажатие кнопки перезагрузки (F5) не перезагружает статические файлы. Если вы следовали принятому решению, но по-прежнему не видите изменений, внесенных в CSS, нажмитеctrl + shift + R чтобы игнорировать кешированные файлы и перезагрузить статические файлы.

В Firefox нажатие кнопки перезагрузки появляется для перезагрузки статических файлов.

В Edge нажатие кнопки обновления не перезагружает статический файл. Нажатие ctrl + shift + Rдолжно игнорировать кешированные файлы и перезагружать статические файлы. Однако на моем компьютере это не работает.

Кристиан Йохансен
источник

Большое спасибо, что решил мою проблему в Google Chrome (Ctrl + shift + R). Есть ли способ автоматически игнорировать кешированные файлы?

Алексис

1

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

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

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

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

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

колба - версия

Ли-Бах
источник

Извините, но не могли бы вы описать, что именно вы сделали? Я борюсь с той же проблемой!

user3002996

0

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

static/styles/style.css

Гопи П
источник

0

Еще один момент, который стоит добавить в эту тему.

Если вы добавите подчеркивание в имя файла .css, это не сработает.

SW Jeong
источник

0

Еще один момент, который следует добавить. Наряду с вышеупомянутыми ответами, убедитесь, что в app.pyфайл добавлена строка ниже :

app = Flask(__name__, static_folder="your path to static")

В противном случае flask не сможет обнаружить статическую папку.

Санджай Нандакумар
источник

0

Если какой-либо из вышеперечисленных методов не работает, а ваш код идеален, попробуйте обновить его, нажав Ctrl + F5. Это очистит все следы, а затем перезагрузит файл. У меня это сработало.

Hackytech
источник

-8

Я почти уверен, что он похож на шаблон Laravel, так я и сделал свой.

<link rel="stylesheet" href="/folder/stylesheets/stylesheet.css" />

Ссылка: проблема пути к файлу CSS

Простое приложение-фляга, которое считывает свое содержимое из файла .html. Внешняя таблица стилей блокируется?

nCore
источник

2

Не собираюсь голосовать против, но для вашего назидания, Laravel - это PHP, а Flask - это Python. Они не работают подобным образом. У них очень разные структуры каталогов и поведение.

Mr. Concolato

чтобы импортировать статические файлы, нам нужно поместить эти статические файлы в статическую папку. Указанная вами структура папок работает с обычным файлом HTML. но не с Flask

Gopi P

Приложение не загружает файл .css (flask / python)

Ответы: