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