Como faço para usar CSS no Django?

110

Estou criando meu aplicativo usando Django e me perguntando como posso fazer o Django usar meu arquivo CSS. Quais configurações eu preciso fazer para que o Django veja o arquivo css?

NB: Em uma máquina local

css django django-forms gath
fonte

Respostas:

48

Se você estiver usando o servidor de desenvolvimento, siga o guia de como fazer do projeto django para gerenciar arquivos estáticos para configurar sua URL, então referencie seus arquivos de mídia no modelo - digamos, uma imagem dentro de uma pasta de imagens de /site_media/images/foo.gif.

Joe
fonte
25
Apenas uma nota rápida sobre os documentos do Django - certifique-se de selecionar os documentos para a versão do Django que você está usando. As coisas parecem ter mudado muito entre as versões em relação aos arquivos estáticos.
Sam Starling
3
@Sam tem um ótimo ponto. eu não conseguia descobrir arquivos estáticos para a vida de mim. então, mude a versão do django instalada, e pronto. isso foi literalmente tudo o que eu tive que fazer, porque aparentemente eu estava procurando a versão errada dos documentos.
Josh Brown de
36

Em termos mais gerais, você está perguntando como servir um arquivo estático do Django. Se você estiver executando no Apache, você deve ler http://docs.djangoproject.com/en/dev/howto/deployment/modpython/

Se você estiver executando o servidor de desenvolvimento (digamos, em seu laptop), leia http://docs.djangoproject.com/en/dev/howto/static-files/

Observe o grande aviso sobre o servidor de desenvolvimento Django:

  • Usar este servidor é ineficiente e inseguro.
  • Não use isso em um ambiente de produção.
  • Use isso apenas para desenvolvimento.
Peter Rowell
fonte
"Não use isso em um ambiente de produção." Você se importa em expandir isso?
Chris
@Chris: Você está certo, a declaração foi um pouco ambígua. Eu estava me referindo ao servidor de desenvolvimento Django. Embora eu o tenha executado algumas vezes em nosso site de produção, foi apenas por curtos períodos de tempo enquanto depurava problemas complicados.
Peter Rowell
Obrigado pelo esclarecimento, eu estava olhando para minhas implantações django rodando no apache me perguntando o que fiz de errado. :)
Chris
1
Agradável. Eu gosto dos 3 itens dizendo a mesma coisa de maneiras diferentes. Obrigado pelo aviso.
KobeJohn
13
Eu absolutamente amo as pessoas que aparecem 4,5 anos depois que uma resposta foi postada e votam contra ela. Eu me pergunto se eles ainda sabiam o Django foi em 11/08 ... provavelmente não. Não são os pontos rep que chegam a mim, é a combinação exibida da ignorância e arrogância com apenas um toque de ser muuuito atrasado para a festa. Eu me pergunto como eles classificariam minhas postagens para comp.lang.c em, digamos, 1987? Melhor não perguntar.
Peter Rowell
13

Isso também me causou problemas por um tempo (erros 404 não encontrados). O que faltava para mim era editar a STATICFILES_DIRStupla em settings.py para me fornecer o seguinte:

STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(os.path.dirname(__file__),'media').replace('\\','/'),
)

Isso, então, pegou meus arquivos CSS em uma pasta chamada 'media' que estava no nível superior do meu projeto django.

Eu também tive:

MEDIA_ROOT = ''
MEDIA_URL = ''
STATIC_ROOT = ''
STATIC_URL = '/media/'

(certifique-se de ter a liderança /acima emSTATIC_URL )

Claro, como dito acima, você precisa ter o arquivo CSS devidamente incluído em seus arquivos html. Eu tinha:

<link href="{{ STATIC_URL }}css/ea_base.css" rel="stylesheet" type="text/css" media="screen" />
Jacanterbury
fonte
Finalmente, uma solução clara, simples e elegante. Funciona bem com Django 1.5.
pbarill 01 de
# Sempre use barras normais, mesmo no Windows. .replace('\\','/')é desnecessário.
mak
12

Quais configurações eu preciso fazer para que o Django veja o arquivo css?

Nenhum.

Certifique-se de que o seu modelo inclui o arquivo CSS (como o HTML padrão faz) e coloque o arquivo CSS no servidor de mídia.

Para esclarecer: com o Django, é altamente recomendável que você sirva todas as suas mídias (tudo que não seja html dinâmico) de uma instância de servidor diferente. Como você implementa isso é totalmente com você, mas a maioria das pessoas cria um subdomínio.

Oli
fonte
2
Oi, Oli. Eu sei que este post tem quase 3 anos, mas esta ainda é a melhor maneira de vincular css a templates django? Parece que seria mais fácil vincular css a uma URL abs como static.example.com e apenas armazenar todos os arquivos estáticos nessa url.
cp3
0

Bem, a maneira mais fácil de usar css com django é adicioná-lo aos seus modelos como arquivos estáticos.

Mas é um pouco parecido com o ajax, não encontrei nada que diga como incluí-lo de uma forma padrão.

Existe um módulo css-compressor para django se você quiser otimizar seu tamanho.

Roch
fonte