Програма не збирає .css файл (колба / пітон)

113

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

/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..)

Я знаю, що це дуже добре працює, тому що я все ще в змозі надати шаблон. Однак, коли я спробував перемістити свій код стилю з блоку «стиль» у тезі «head» html до зовнішнього файлу, весь стиль відійшов, залишивши оголену сторінку HTML. Хтось бачив помилки в моїй файловій структурі?

— Зак
джерело

225

Потрібно мати "статичну" настройку папок (для файлів 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 під статикою / styles / mainpage.css

— codegeek
джерело

4

Це слід позначити як відповідь. Це рішення працювало на мене, якщо не для вас, будь ласка, скажіть нам, щоб допомогти. Інакше позначте його. @zack

— Shahryar Saljoughi

2

Чому це не було позначено як правильну відповідь? Вона повинна бути.

— pfabri

1

Вибачте, забув повернутися до цієї :) статичної папки, безумовно, був шлях

— Зак,

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 ( назва )) та здійснити пошук 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.

ви можете змінити шаблон і статичні папки за своїм бажанням та зареєструватися у програмі = Колба ...

По правді кажучи, я почав відчувати проблему, коли возився з папкою, а часом працював не так. це вирішує проблему раз і назавжди

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 колби. Вищезазначені файлові структури для мене не працювали, але я знайшов таку, яка зробила такі дії:

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

(Зверніть увагу, що "статичні" та "шаблони" - це папки, які мають бути названі точно однаково.)

Щоб перевірити, яку версію колби ви запускаєте, слід відкрити Python в терміналі та ввести відповідно:

імпортна колба

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

— Лі-Бах
джерело

Вибачте, але ви можете, будь ласка, описати, що саме ви зробили? Я борюся з тим же питанням!

— user3002996

0

Структура проекту колби різна. Як ви вже згадували, структура проекту однакова, але єдиною проблемою є папка стилів. Папка стилів повинна входити в статичну папку.

static/styles/style.css

— Гопі П
джерело

0

Ще один момент, який потрібно додати до цієї теми.

Якщо ви додасте в назву файлу .css підкреслення, це не працюватиме.

— SW Чонг
джерело

0

Ще один момент, який потрібно додати. До того ж, якщо вище відповіді, що підтверджуються, переконайтеся, що до app.pyфайлу додано наступний рядок :

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

В іншому випадку колба не зможе виявити статичну папку.

— Санджай Нандакумар
джерело

0

Якщо будь-який із перерахованих вище методів не працює, і ви кодує ідеально, спробуйте оновити оновлення, натиснувши Ctrl + F5. Він очистить усі фракції, а потім перезавантажить файл. Це працювало для мене.

— Hackytech
джерело

-8

Я майже впевнений, що це схоже на шаблон Laravel, ось як я зробив свою.

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

Посилається: Проблема з маршрутом до CSS

Просте додаток для фляжок, яке зчитує його вміст із файлу .html. Блокується зовнішній аркуш стилів?

— nКоре
джерело

2

Не збираючись голосувати за вас, але за ваше зведення, Laravel - PHP, а Flask - Python. Вони не працюють аналогічно. Вони мають дуже різні структури каталогів та поведінки.

— Містер Конколато

щоб імпортувати статичні файли, нам потрібно помістити ці статичні файли в статичну папку. Структура папок, яку ви надали, працює із звичайним HTML-файлом. але не з колбою

— Gopi P