Aplikacja nie pobiera pliku .css (flask / python)

113

Renderuję szablon, który próbuję stylizować za pomocą zewnętrznego arkusza stylów. Struktura plików jest następująca.

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

mainpage.html wygląda następująco

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

Żaden z moich stylów nie jest jednak stosowany. Czy ma to coś wspólnego z tym, że HTML jest szablonem, który renderuję? Python wygląda tak.

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

Wiem, że to działa, ponieważ nadal mogę renderować szablon. Jednakże, kiedy próbowałem przenieść mój kod stylizacji z bloku „style” w tagu „head” HTML do pliku zewnętrznego, wszystkie style zniknęły, pozostawiając pustą stronę HTML. Czy ktoś widzi jakieś błędy w mojej strukturze plików?

python html css templates flask Zack
źródło

Odpowiedzi:

229

Musisz mieć „statyczną” konfigurację folderu (dla plików css / js), chyba że specjalnie nadpisujesz ją podczas inicjalizacji Flaska. Zakładam, że go nie przesłoniłeś.

Twoja struktura katalogów dla css powinna wyglądać następująco:

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

Zauważ, że twój katalog / styles powinien znajdować się w katalogu / static

Następnie zrób to

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

Flask będzie teraz szukał pliku css w static / styles / mainpage.css

codegeek
źródło
4
Powinno to zostać oznaczone jako odpowiedź. To rozwiązanie zadziałało dla mnie, jeśli nie dla Ciebie, powiedz nam, abyśmy pomogli. W przeciwnym razie oflaguj to. @zack
Shahryar Saljoughi
2
Dlaczego ta odpowiedź nie została oznaczona jako poprawna? Powinno być.
pfabri
1
Przepraszam, zapomniałem wrócić do tego :) folder statyczny był zdecydowanie właściwą drogą
Zack
1
dla JavaScript dodaj plik skryptu do folderu statycznego . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>
CZ
17

W szablonach jinja2 (których używa kolba) użyj

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

Te staticpliki są zwykle w staticfolderze, choć chyba skonfigurowany inaczej.

njzk2
źródło
1
Niestety powoduje to błąd. BuildError: ('mainpage.css', {}, brak)
Zack
6

Przeczytałem wiele wątków i żaden z nich nie rozwiązał problemu, który ludzie opisują i ja też doświadczyłem.

Próbowałem nawet odejść od conda i użyć pip, aby zaktualizować do Pythona 3.7, wypróbowałem wszystkie proponowane kodowania i żaden z nich nie został naprawiony.

A oto dlaczego (problem):

domyślnie python / flask przeszukuje statyczny i szablon w strukturze folderów, takich jak: 

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

możesz zweryfikować samodzielnie za pomocą debuggera na Pycharm (lub cokolwiek innego) i sprawdzić wartości w aplikacji (app = Flask ( name )) i wyszukać teamplate_folder i static_folder

Aby to naprawić, musisz określić wartości podczas tworzenia aplikacji, coś takiego: 

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)

ścieżki TEMPLATE_DIR i STATIC_DIR zależą od lokalizacji aplikacji pliku. w moim przypadku, zobacz zdjęcie, znajdował się w folderze pod src.

możesz zmienić szablon i foldery statyczne, jak chcesz i zarejestrować się w aplikacji = Flask ...

Prawdę mówiąc, zacząłem doświadczać problemu, gdy bawiłem się folderem i czasami nie działałem. to rozwiązuje problem raz na zawsze

kod html wygląda następująco: 

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

To jest kod

Tutaj struktura folderów

Stefano Tuveri
źródło
2

Nadal występują problemy po wykonaniu Rozwiązanie dostarczone przez codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?

W przeglądarce Google Chrome naciśnięcie przycisku ponownego ładowania (F5) nie spowoduje ponownego załadowania plików statycznych. Jeśli zastosowałeś się do zaakceptowanego rozwiązania, ale nadal nie widzisz zmian wprowadzonych w CSS, naciśnij, ctrl + shift + Raby zignorować pliki z pamięci podręcznej i ponownie załadować pliki statyczne.

W przeglądarce Firefox naciśnięcie przycisku odświeżania powoduje ponowne załadowanie plików statycznych.

W Edge naciśnięcie przycisku odświeżania nie powoduje przeładowania pliku statycznego. Naciśnięcie ctrl + shift + Rma zignorować pliki z pamięci podręcznej i przeładować pliki statyczne. Jednak to nie działa na moim komputerze.

Christian Johansen
źródło
Dziękuję bardzo, że rozwiązało mój problem w Google Chrome (Ctrl + Shift + R). Czy jest jakiś sposób na automatyczne ignorowanie plików w pamięci podręcznej?
Alexis
1

Używam teraz wersji 1.0.2 flask. Powyższe struktury plików nie działały dla mnie, ale znalazłem taki, który działał, a są one następujące:

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

(Zwróć uwagę, że „statyczne” i „szablony” to foldery, które powinny mieć dokładnie taką samą nazwę).

Aby sprawdzić, jakiej wersji flask używasz, otwórz Pythona w terminalu i wpisz odpowiednio:

importować kolbę

kolba - wersja

Ly-Bach
źródło
Przepraszam, ale czy mógłbyś opisać dokładnie, co zrobiłeś? Zmagam się z tym samym problemem!
user3002996
0

Struktura projektu kolby jest inna. Jak wspomniałeś w pytaniu, struktura projektu jest taka sama, ale jedynym problemem jest folder styles. Folder stylów musi znajdować się w folderze statycznym.

static/styles/style.css
Gopi P
źródło
0

Jeszcze jeden punkt do dodania do tego wątku.

Jeśli dodasz podkreślenie w nazwie pliku .css, to nie zadziała.

SW Jeong
źródło
0

Jeszcze jeden punkt do dodania. Oprócz powyższych głosów za pozytywnymi odpowiedziami, upewnij się, że poniższy wiersz został dodany do app.pypliku:

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

W przeciwnym razie flask nie będzie w stanie wykryć folderu statycznego.

Sanjay Nandakumar
źródło
0

Jeśli którakolwiek z powyższych metod nie działa, a Twój kod jest doskonały, spróbuj twardego odświeżenia, naciskając Ctrl + F5. Spowoduje to wyczyszczenie wszystkich ścieżek, a następnie ponowne załadowanie pliku. U mnie to zadziałało.

Hackytech
źródło
-8

Jestem prawie pewien, że jest podobny do szablonu Laravel, tak zrobiłem mój.

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

Odniesiony: problem ze ścieżką do pliku CSS

Prosta aplikacja do kolb, która odczytuje zawartość z pliku .html. Zewnętrzny arkusz stylów jest blokowany?

nCore
źródło
2
Nie zamierzam cię głosować, ale dla twojej budowy Laravel to PHP, a Flask to Python. Nie działają w podobny sposób. Mają bardzo różne struktury i zachowania katalogów.
Pan Concolato,
aby zaimportować pliki statyczne, musimy je umieścić w folderze statycznym. Podana struktura folderów działa ze zwykłym plikiem HTML. ale nie z Flask
Gopi P