2012-01-04 19 views
39

Estoy usando twitter bootstrap y django. Tengo mis dependencias manejadas con un archivo de requisitos de pip.¿Cómo se usa menos css con django?

Tengo 2 preguntas:

  1. ¿Cómo puedo utilizar menos mientras yo estoy desarrollando por lo que obtendrá cuando se compila edito uno de mis menos archivos?
  2. ¿Cómo puedo crear algún tipo de script de compilación que comprima y combine mi JS y genere CSS desde Less como parte de una implementación?

He escrito un script de compilación personalizado que crea un virtualenv, ejecuta 'pip install -r requirements.txt', django syncdb, django migrate y luego nos vamos.

¿Cuál es la forma más fácil de integrar menos en esto?

Gracias

Respuesta

42
  1. Instalar django-static-precompiler:

    1. Run pip install django-static-precompiler
    2. static_precompiler Añadir a INSTALLED_APPS
  2. Instalar lessc ejecutable, ya sea a través de su gestor de paquetes o ejecutar npm install less (NPM es gestor de paquetes nodo, que debe ser distro-instalable, su uso en última instancia)

  3. Use menos en las plantillas:

    1. Cargar la etiqueta de plantilla: {% load less %}
    2. uso de etiquetas de plantilla de menos: <link rel="stylesheet" href="{{ STATIC_URL}}{% less "path/to/styles.less" %}" />

Tenga en cuenta que de archivos por defecto compilado se guardan en COMPILED carpeta bajo su STATIC_ROOT (o MEDIA_ROOT si no tiene STATIC_ROOT en la configuración). Puede cambiar el nombre de esta carpeta con la configuración STATIC_PRECOMPILER_OUTPUT_DIR. Vea el documentation para más detalles.

No lo probé personalmente, pero sé que django-compressor también es compatible con menos.

+8

Prefiero django-compressor ya que me ayuda más, y puedo compilar tanto scss como coffeescript – krs

+0

El problema con todas las aplicaciones do es que no supervisan los archivos incluidos para cambios ... – jpic

+1

@jpic, aquí está la solución para menos css: http://www.caktusgroup.com/blog/2012/03/05/using-less-django/ El intérprete de JS puede ejecutar el lado del cliente, aunque lentamente. Entonces, si DEBUG = True, usa el intérprete JS, que elimina el monitoreo de los cambios. – benesch

Cuestiones relacionadas