Aplikasi tidak mengambil file .css (flask / python)

113

Saya merender template, yang saya coba gaya dengan style sheet eksternal. Struktur file adalah sebagai berikut.

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

mainpage.html terlihat seperti ini

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

Tidak ada gaya saya yang diterapkan. Apakah ini ada hubungannya dengan fakta bahwa html adalah template yang saya render? Python itu terlihat seperti ini.

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

Saya tahu ini banyak yang berhasil, karena saya masih bisa membuat template. Namun, ketika saya mencoba untuk memindahkan kode gaya saya dari blok "gaya" dalam tag "head" html ke file eksternal, semua gaya hilang, meninggalkan halaman html kosong. Adakah yang melihat kesalahan dengan struktur file saya?

python html css templates flask Zack
sumber

226

Anda perlu memiliki pengaturan folder 'statis' (untuk file css / js) kecuali Anda secara khusus menimpanya selama inisialisasi Flask. Saya berasumsi bahwa Anda tidak menimpanya.

Struktur direktori Anda untuk css harus seperti ini:

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

Perhatikan bahwa direktori / styles Anda harus berada di bawah / static

Lalu, lakukan ini

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

Flask sekarang akan mencari file css di bawah static / styles / mainpage.css

codegeek
sumber

4

Ini harus ditandai sebagai jawaban. Solusi ini berhasil untuk saya, jika bukan untuk Anda, beri tahu kami untuk membantu. Jika tidak, tandai itu. @

2017

2

Mengapa ini belum ditandai sebagai jawaban yang benar? Harus.

pfabri

1

Maaf, lupa untuk kembali ke yang satu ini :) folder statis pasti cara yang harus dilakukan

Zack

1

untuk Javascript menambahkan file skrip ke folder statis . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

HAr

17

Dalam template jinja2 (yang menggunakan flask), gunakan

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

The staticfile biasanya dalam staticfolder, meskipun, kecuali dikonfigurasi sebaliknya.

njzk2.dll
sumber

1

Sayangnya, ini memberi saya kesalahan. BuildError: ('mainpage.css', {}, None)

Zack

6

Saya telah membaca beberapa utas dan tidak ada yang memperbaiki masalah yang dijelaskan orang-orang dan saya juga alami.

Saya bahkan telah mencoba untuk menjauh dari conda dan menggunakan pip, untuk meningkatkan ke python 3.7, saya telah mencoba semua pengkodean yang diusulkan dan tidak ada yang diperbaiki.

Dan inilah alasannya (masalahnya):

secara default python / flask mencari statik dan template dalam struktur folder seperti:

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

Anda dapat memverifikasi sendiri menggunakan debugger di Pycharm (atau yang lainnya) dan memeriksa nilai pada aplikasi (app = Flask ( name )) dan mencari teamplate_folder dan static_folder

untuk memperbaikinya, Anda harus menentukan nilai saat membuat aplikasi seperti ini:

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)

jalur TEMPLATE_DIR dan STATIC_DIR bergantung pada lokasi aplikasi file. dalam kasus saya, lihat gambar, itu terletak di dalam folder di bawah src.

Anda dapat mengubah template dan folder statis sesuai keinginan dan mendaftar di app = Flask ...

Sebenarnya, saya sudah mulai mengalami masalah ketika bermain-main dengan folder dan kadang-kadang bekerja pada saat tidak. ini memperbaiki masalah untuk selamanya

kode html terlihat seperti ini:

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

Ini kodenya

Berikut struktur foldernya

Stefano Tuveri
sumber

2

Masih mengalami masalah setelah mengikuti solusi yang disediakan oleh codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?

Di Google Chrome menekan tombol muat ulang (F5) tidak akan memuat ulang file statis. Jika Anda telah mengikuti solusi yang diterima tetapi masih tidak melihat perubahan yang Anda buat pada CSS, tekan ctrl + shift + Runtuk mengabaikan file cache dan muat ulang file statis.

Di Firefox menekan tombol reload muncul untuk memuat ulang file statis.

Di Edge, menekan tombol segarkan tidak memuat ulang file statis. Menekan ctrl + shift + Rseharusnya mengabaikan file yang di-cache dan memuat ulang file statis. Namun ini tidak berfungsi di komputer saya.

Christian Johansen
sumber

Terima kasih banyak, ini memecahkan masalah saya di Google Chrome (Ctrl + shift + R). Adakah cara untuk mengabaikan file cache secara otomatis?

Alexis

1

Saya sedang menjalankan flask versi 1.0.2 sekarang. Struktur file di atas tidak berfungsi untuk saya, tetapi saya menemukan yang berfungsi, yaitu sebagai berikut:

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

(Harap dicatat bahwa 'statis' dan 'template' adalah folder, yang harus diberi nama yang persis sama.)

Untuk memeriksa versi flask yang Anda jalankan, Anda harus membuka Python di terminal dan mengetik berikut ini:

termos impor

flask --version

Ly-Bach
sumber

Maaf, tapi bisakah Anda menjelaskan dengan tepat apa yang Anda lakukan? Saya berjuang dengan masalah yang sama!

pengguna3002996

0

Struktur proyek labu berbeda. Seperti yang Anda sebutkan dalam pertanyaan, struktur proyek sama tetapi satu-satunya masalah adalah dengan folder gaya. Folder gaya harus berada di dalam folder statis.

static/styles/style.css

Gopi P.
sumber

0

Satu hal lagi untuk ditambahkan ke utas ini.

Jika Anda menambahkan garis bawah pada nama file .css Anda, maka itu tidak akan berhasil.

SW Jeong
sumber

0

Satu hal lagi untuk ditambahkan Bersamaan dengan jawaban yang diberi suara positif di atas, pastikan baris di bawah ditambahkan ke app.pyfile:

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

Jika tidak, flask tidak akan bisa mendeteksi folder statis.

Sanjay Nandakumar
sumber

0

Jika salah satu metode di atas tidak berfungsi dan kode Anda sempurna, cobalah menyegarkan dengan menekan Ctrl + F5. Ini akan menghapus semua chaces dan kemudian memuat ulang file. Itu berhasil untuk saya.

Hackytech
sumber

-8

Saya cukup yakin ini mirip dengan template Laravel, begitulah cara saya melakukannya.

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

Dirujuk: Masalah jalur file CSS

Aplikasi flask sederhana yang membaca isinya dari file .html. Style sheet eksternal diblokir?

nCore
sumber

2

Tidak akan meremehkan Anda tetapi untuk pendidikan Anda, Laravel adalah PHP dan Flask adalah Python. Mereka tidak bekerja dengan cara yang sama. Mereka memiliki struktur dan perilaku direktori yang sangat berbeda.

Tn. Concolato

untuk mengimpor file statis kita perlu menempatkan file statis tersebut ke dalam folder statis. Struktur folder yang Anda berikan berfungsi dengan file HTML biasa. tetapi tidak dengan Flask

Gopi P

Aplikasi tidak mengambil file .css (flask / python)

Jawaban: