O aplicativo não coleta o arquivo .css (flask / python)

112

Estou renderizando um modelo, que estou tentando estilizar com uma folha de estilo externa. A estrutura do arquivo é a seguinte.

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

mainpage.html se parece com isto

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

No entanto, nenhum dos meus estilos está sendo aplicado. Tem algo a ver com o fato de que o html é um modelo que estou renderizando? O python se parece com isso.

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

Sei que tudo está funcionando, porque ainda sou capaz de renderizar o modelo. No entanto, quando tentei mover meu código de estilo de um bloco de "estilo" dentro da tag "head" do html para um arquivo externo, todo o estilo foi embora, deixando uma página html vazia. Alguém viu algum erro na estrutura do meu arquivo?

python html css templates flask Zack
fonte

Respostas:

224

Você precisa ter uma configuração de pasta 'estática' (para arquivos css / js), a menos que você a substitua especificamente durante a inicialização do Flask. Estou assumindo que você não o substituiu.

Sua estrutura de diretório para css deve ser assim:

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

Observe que seu diretório / styles deve estar em / static

Então faça isso

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

O Flask irá agora procurar o arquivo css em static / styles / mainpage.css

codegeek
fonte
4
Isso deve ser sinalizado como resposta. Esta solução funcionou para mim, se não funcionou para você, diga-nos para ajudar. Caso contrário, sinalize-o. @zack
Shahryar Saljoughi
2
Por que esta não foi marcada como a resposta correta? Deveria ser.
pfabri
1
Desculpe, esqueci de voltar a este :) pasta estática era definitivamente o caminho a seguir
Zack
para Javascript, adicione o arquivo de script à pasta estática . <script src="{{ url_for('static',filename='javascriptFileName.js') }}"> </script>
HAr
17

Em modelos jinja2 (que o frasco usa), use

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

Os staticarquivos geralmente estão na staticpasta, a menos que configurado de outra forma.

njzk2
fonte
1
Isso está me dando um erro, infelizmente. BuildError: ('mainpage.css', {}, None)
Zack
6

Eu li vários tópicos e nenhum deles corrigiu o problema que as pessoas estão descrevendo e eu também experimentei.

Eu até tentei sair do conda e usar o pip, para atualizar para o python 3.7, eu tentei todos os códigos propostos e nenhum deles corrigido.

E aqui está o porquê (o problema):

por padrão, python / flask pesquisa o estático e o modelo em uma estrutura de pasta como: 

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

você pode verificar por si mesmo usando o depurador no Pycharm (ou qualquer outra coisa) e verificar os valores no aplicativo (app = Flask ( nome )) e pesquisar por teamplate_folder e static_folder

para corrigir isso, você deve especificar os valores ao criar o aplicativo da seguinte forma: 

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)

o caminho TEMPLATE_DIR e STATIC_DIR depende de onde o aplicativo de arquivo está localizado. no meu caso, veja a imagem, ele estava localizado dentro de uma pasta sob src.

você pode alterar o template e as pastas estáticas como desejar e se registrar no app = Flask ...

Na verdade, comecei a ter o problema de mexer com a pasta e às vezes não funcionava. isso resolve o problema de uma vez por todas

o código html se parece com isto: 

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

Este é o código

Aqui a estrutura das pastas

Stefano Tuveri
fonte
2

Continuo tendo problemas após seguir a solução fornecida pela codegeek
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">:?

No Google Chrome, pressionar o botão recarregar (F5) não recarregará os arquivos estáticos. Se você seguiu a solução aceita, mas ainda não vê as alterações feitas no CSS, pressione ctrl + shift + Rpara ignorar os arquivos em cache e recarregar os arquivos estáticos.

No Firefox, pressionar o botão recarregar aparece para recarregar os arquivos estáticos.

No Edge, pressionar o botão Atualizar não recarrega o arquivo estático. Pressionar ctrl + shift + Rdeve ignorar os arquivos em cache e recarregar os arquivos estáticos. No entanto, isso não funciona no meu computador.

Christian Johansen
fonte
Muito obrigado resolveu meu problema no Google Chrome (Ctrl + shift + R). Alguma maneira de ignorar arquivos em cache automaticamente?
Alexis
1

Estou executando a versão 1.0.2 do flask agora. As estruturas de arquivo acima não funcionaram para mim, mas encontrei uma que funcionava, que são as seguintes:

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

(Observe que 'estático' e 'modelos' são pastas, que devem ter exatamente o mesmo nome.)

Para verificar qual versão do flask você está executando, abra o Python no terminal e digite o seguinte:

frasco de importação

frasco - versão

Ly-Bach
fonte
Desculpe, mas você poderia descrever exatamente o que você fez? Estou lutando com o mesmo problema!
user3002996
0

A estrutura do projeto do frasco é diferente. Como você mencionou na pergunta, a estrutura do projeto é a mesma, mas o único problema é com a pasta de estilos. A pasta de estilos deve vir dentro da pasta estática.

static/styles/style.css
Gopi P
fonte
0

Mais um ponto a acrescentar a este tópico.

Se você adicionar um sublinhado ao nome do arquivo .css, não funcionará.

SW Jeong
fonte
0

Mais um ponto a ser adicionado. Juntamente com as respostas votadas acima, certifique-se de que a linha abaixo seja adicionada ao app.pyarquivo:

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

Caso contrário, o flask não será capaz de detectar a pasta estática.

Sanjay Nandakumar
fonte
0

Se algum dos métodos acima não estiver funcionando e seu código estiver perfeito, tente fazer uma atualização pressionando Ctrl + F5. Isso limpará todos os chaces e recarregará o arquivo. Funcionou para mim

Hackytech
fonte
-8

Tenho certeza de que é semelhante ao template do Laravel, foi assim que fiz o meu.

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

Referido: problema de caminho do arquivo CSS

Aplicativo simples em frasco que lê seu conteúdo de um arquivo .html. A folha de estilo externa está sendo bloqueada?

nCore
fonte
2
Não vou rejeitar você, mas para sua edificação, Laravel é PHP e Flask é Python. Eles não funcionam de maneira semelhante. Eles têm estruturas de diretório e comportamentos muito diferentes.
Sr. Concolato
para importar arquivos estáticos, precisamos colocar esses arquivos estáticos em uma pasta estática. A estrutura de pastas que você forneceu funciona com um arquivo HTML normal. mas não com Flask
Gopi P