Configurar LESS en proyectos Blazor con Visual studio


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

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s