LESS es un pre-procesador de CSS muy popular y muy usando en la industria. Facilita la creación de variables y estilos complejos en CSS, así como la administración de nuestras hojas de estilo.
Veamos como seria la configuración para Blazor usando Visual studio
Primero, debemos instalar una extensión llamada Web Compiler que nos va permitir “compilar” los archivos LESS a CSS después de compilar la solución :
Luego podemos incorporar nuestros archivos LESS al proyecto y configurar la estructura que queremos usar para ellos.
Finalmente, debemos agregar el archivo copilerconfig.json en la ruta raíz de nuestro proyecto blazor. Este debe incluir toda la configuración de input para archivos LESS y el out en CSS que queremos generar:
Este es un ejemplo de que como se vería la estructura del archivo JSON del compilerconfig, es importante resaltar que este es un vector y por eso debe ir encerrado en corchetes.
[
{
“inputFile”: “wwwroot/css/styles.less”,
“minify”: {
“enabled”: true
},
“options”: {
“sourceMap”: true
},
“outputFile”: “wwwroot/css/site.css”
}
]
Este procedimiento también funciona para otros preprocesadores, entonces revisa el soporte de Web Compiler https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebCompiler