L'applicazione non raccoglie il file .css (flask / python)

113

Sto eseguendo il rendering di un modello, che sto tentando di modellare con un foglio di stile esterno. La struttura del file è la seguente.

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

mainpage.html ha questo aspetto

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

Nessuno dei miei stili viene applicato però. Ha qualcosa a che fare con il fatto che l'html è un modello che sto renderizzando? Il pitone ha questo aspetto.

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

So che sta funzionando così tanto, perché sono ancora in grado di eseguire il rendering del modello. Tuttavia, quando ho provato a spostare il mio codice di stile da un blocco "style" all'interno del tag "head" dell'html a un file esterno, tutto lo stile è andato via, lasciando una semplice pagina html. Qualcuno vede errori con la struttura del mio file?

— Zack
fonte

226

È necessario disporre di una configurazione della cartella "statica" (per i file css / js) a meno che non venga specificatamente sovrascritta durante l'inizializzazione di Flask. Presumo che tu non l'abbia ignorato.

La struttura della tua directory per css dovrebbe essere come:

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

Nota che la tua directory / styles dovrebbe essere sotto / static

Quindi, fallo

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

Flask ora cercherà il file css in static / styles / mainpage.css

— codegeek
fonte

4

Questo dovrebbe essere contrassegnato come risposta. Questa soluzione ha funzionato per me, se non per te, per favore dicci di aiutare. Altrimenti segnalalo. @zack

— Shahryar Saljoughi

2

Perché non è stata contrassegnata come risposta corretta? Dovrebbe essere.

— pfabri

1

Scusa, ho dimenticato di tornare a questa :) cartella statica era sicuramente la strada da percorrere

— Zack

1

per Javascript aggiungi il file di script alla cartella statica . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>

— HAr

17

Nei modelli jinja2 (che utilizza il flask), usa

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

I staticfile si trovano solitamente nella staticcartella, se non diversamente configurato.

— njzk2
fonte

1

Questo mi sta dando un errore purtroppo. BuildError: ('mainpage.css', {}, None)

— Zack

6

Ho letto più thread e nessuno di loro ha risolto il problema che le persone descrivono e anch'io ho riscontrato.

Ho anche provato ad allontanarmi da conda e usare pip, per passare a python 3.7, ho provato tutti i codici proposti e nessuno di loro è stato risolto.

Ed ecco perché (il problema):

per impostazione predefinita python / flask cerca lo statico e il modello in una struttura di cartelle come:

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

puoi verificare da solo usando il debugger su Pycharm (o qualsiasi altra cosa) e controllare i valori sull'app (app = Flask ( name )) e cercare teamplate_folder e static_folder

per risolvere questo problema, devi specificare i valori quando crei l'app qualcosa del genere:

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)

il percorso TEMPLATE_DIR e STATIC_DIR dipendono da dove si trova l'app file. nel mio caso, vedi l'immagine, si trovava all'interno di una cartella sotto src.

puoi modificare il modello e le cartelle statiche come desideri e registrarti sull'app = Flask ...

In verità, ho iniziato a riscontrare il problema quando scherzavo con la cartella e, a volte, a volte no. questo risolve il problema una volta per tutte

il codice html ha questo aspetto:

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

Questo il codice

Di seguito la struttura delle cartelle

— Stefano Tuveri
fonte

2

Ancora problemi dopo aver seguito la soluzione fornita da codegeek:
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">?

In Google Chrome premendo il pulsante di ricarica (F5) non verranno ricaricati i file statici. Se hai seguito la soluzione accettata ma ancora non vedi le modifiche apportate a CSS, premi ctrl + shift + Rper ignorare i file memorizzati nella cache e ricaricare i file statici.

In Firefox la pressione del pulsante di ricarica sembra ricaricare i file statici.

In Edge, premendo il pulsante di aggiornamento non viene ricaricato il file statico. La pressione ctrl + shift + Rdovrebbe ignorare i file memorizzati nella cache e ricaricare i file statici. Tuttavia questo non funziona sul mio computer.

— Christian Johansen
fonte

Grazie mille ha risolto il mio problema in Google Chrome (Ctrl + Maiusc + R). Un modo per ignorare automaticamente i file memorizzati nella cache?

— Alexis

1

Al momento sto eseguendo la versione 1.0.2 di flask. Le strutture di file sopra non funzionavano per me, ma ne ho trovata una che funzionava, che sono le seguenti:

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

(Tieni presente che "statico" e "modelli" sono cartelle, che dovrebbero avere lo stesso nome.)

Per verificare quale versione di flask stai utilizzando, dovresti aprire Python nel terminale e digitare quanto segue di conseguenza:

pallone di importazione

fiasco: versione

— Ly-Bach
fonte

Non ho capito, ma potresti descrivere esattamente cosa hai fatto? Sto lottando con lo stesso problema!

— user3002996

0

La struttura del progetto del pallone è diversa. Come hai detto in questione, la struttura del progetto è la stessa ma l'unico problema è la cartella degli stili. La cartella Stili deve essere contenuta nella cartella statica.

static/styles/style.css

— Gopi P
fonte

0

Un altro punto da aggiungere a questo thread.

Se aggiungi un trattino basso nel nome del file .css, non funzionerà.

— SW Jeong
fonte

0

Un altro punto da aggiungere Insieme alle risposte sopra votate, assicurati che la riga sottostante sia aggiunta al app.pyfile:

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

In caso contrario, il flask non sarà in grado di rilevare la cartella statica.

— Sanjay Nandakumar
fonte

0

Se uno qualsiasi dei metodi precedenti non funziona e il codice è perfetto, prova a eseguire un aggiornamento completo premendo Ctrl + F5. Cancellerà tutte le possibilità e quindi ricaricherà il file. Ha funzionato per me.

— Hackytech
fonte

-8

Sono abbastanza sicuro che sia simile al modello Laravel, è così che ho fatto il mio.

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

Riferito: problema di percorso del file CSS

Semplice applicazione flask che legge il suo contenuto da un file .html. Il foglio di stile esterno è bloccato?

— nCore
fonte

2

Non ti voterò ma per la tua edificazione, Laravel è PHP e Flask è Python. Non funzionano in modo simile. Hanno strutture e comportamenti di directory molto diversi.

— Sig. Concolato

per importare i file statici dobbiamo posizionare quei file statici in una cartella statica. La struttura delle cartelle che hai fornito funziona con un normale file HTML. ma non con Flask

— Gopi P