login

IronWoods.es

Desarrollo web

Blog / Herramientas / Compilar CSS desde LESS

Proceso para instalar y compilar en "tiempo real" CSS a partir de ficheros LESS durante el desarrollo.

Instalación

Para generar CSS en tiempo real, desde la terminal, a partir de ficheros LESS, voy a usar la herramienta Less Watch Compiler en un proyecto de Laravel.

Nota: es necesario tener NodeJs / Npm instalados.

Modificamos el fichero "package.json" de Laravel (en el directorio raíz del proyecto).

En "devDependencies" añadimos:

"less": "^3.11.3",

"less-watch-compiler": "^1.14.6"

y en "scripts":

"less-watch": "less-watch-compiler"

El fichero "package.json" quedará como:

{

"private": true,

"devDependencies": {

"less": "^3.11.3",

"less-watch-compiler": "^1.14.6"

},

"scripts": {

"less-watch": "less-watch-compiler"

}

}

Ahora instalamos las dependencias en el proyecto:

npm install

Añadir el fichero de configuración de la herramienta "less-watch-compiler.config.json" (en el directorio raiz del proyecto).

Contenido del fichero de configuración:

{

"watchFolder": "/var/www/html/laravel/my-app/resources/less",

"outputFolder": "/var/www/html/laravel/my-app/public/css",

"mainFile": "app.less",

"minified": true,

"sourceMap": false

}

Nota: para ver las opciones de configuración ver la documentación de la herramienta.

Uso

Podemos compilar cambios puntuales que hicimos en los ficheros LESS arrancando y volviendo a cerrar o dejar el proceso corriendo si estamos desarrollando la UI.

Arrancar con el comando:

npm run less-watch

Para terminar el proceso usar la combinación de teclas Ctrl + c.

Nota: Si el código LESS es correcto, se compila automáticamente según escribimos, en caso de errores, estos aparecen en la terminal. Ocasionalmente, será necesario detener el script y volver a arrancarlo tras las necesarias correcciones.



8-8-2020