Pre-procesadores CSS
Contenido del curso
Pre-procesadores CSS
Contenido del curso
Adiós webpack, Vite se ha ganado mi corazón
Desde la clase del Profe. GNDX lo estoy pensando seriamente.
El nivel de abstracción que nos ofrece VIte a los programadores es sorprendente. Ya entiendo porque lo describen de 3cer nivel
Es importante saber que debes tener instalado el modulo de node correspondiente. Intente usar un archivo scss tal cual la clase y me fallo por eso mismo. El profesor se salta un punto bastante importante 😃
Usar la sintaxis de los procesadores sin ninguna configuracion es la magia de Vite.
Para que funciona sass, se agrega la dependencia
npm install -D sass
y el archivo ejemplo.sass debe quedar sin llaves ni punto y coma, así:
h1 color: red
Efectivamente, yo lo hice así porque me apareció en la consola, acompañado del error la solución:
npm install -D sass-embedded
Y el código de saas como lo mencionas.
Gracias.
Este curso debí tomarlo antes de webpack, sin embargo, la ventaja es que ya se usar los dos.
conocer webpack de antemano permite apreciar las bondades de Vite. :-)
Lo mejor de Vite es que con unas pocas líneas de código en la configuración puedes extender la propia funcionalidad de los preprocesadores Sass y Less, configurando, por ejemplo, una clase para el nodo principal o alguna sección de la página en específico 👍🏼
Normalmente en SASS se usa el @use para poder importar archivos sin embargo algo que he notado trabajando con Vite es que obliga a usar el @import, si estoy mal espero alguien pueda corregirme.
De momento no logro que vite pueda hacer uso de sass si es que establezco una estructura de archivos dentro de una carpeta scss, si los estilos de scss lo creo en un solo archivos para luego ser requerido en el archivo principal de css creado por vite los cambios se realizan correctamente, sin embargo si creo una estructura de archivos de sass que finalmente terminen en un archivo index.scss donde se compilen los demás archivos scss para luego ser requerido en archivo principal de css creado por vite, estos cambios no se ven reflejados , la estructura a la cual me refiero es la siguiente.
Me funciona de esta forma:
No lo he probado, pero tal vez instalando el paquete de SASS se pueda usar el @use sin problemas.
Listo!!! Me caso definitivamente con Vite
No me funcionaba lo del sass, instale la dependencia: npm install -d sass y cambé la extensión del archivo de .sass a .scss. Con esto funcionó Ok.
Ojo, si necesitamos importar el archivo de estilos en la extensión del preprocesador por ejemplo .scss dentro de main.js entonces allí debemos instalar el transpilador del preprocesador en el entorno de desarrollo para que funcione, de todas formas vite no los indica!
2025, intente lo del curso solo poniendo la extencion en el archivo y mandarla a llamar, sin embargo me marcaba un error. instale las siguientes dependencias:
npm install -D less
npm install -D sass-embedded
npm install -D sass
y la extencion del archivo fue .scss
Hola que tal compañeros de Platzi, intenté usar variables dentro del archivo sass, también provee con scss, pero no me funcionaron las variables para declarar los atributos, ¿alguien sabe como hacerle o si tengo que instalar algo aparte? se los agradecería. Archivo base1.scss
$color: lightblue; body{ background: $color; }
Es probable que necesites instalar:
npm add -D sass
Te comparto la documentación oficial: https://vitejs.dev/guide/features.html#css-pre-processors
Ya pude, si necesitaba agregar sass También importando directamente el archivo sass dentro del js. Muchas gracias !!
Al intentar importar un archivo .sass falla, se necesita agregar la devDependecies para sass al proyecto
npm add -D sass
It`s True 👍, Thanks!!!
Para las interesados: Curso Nuevo - Curso de Fundamentos de Sass: Crea tu Primera Landing Page
Lo mismo para el uso de Less
npm add -D less
vite eres mi nuevo amigo
¿Cómo integro Sass en mi proyecto Vite?
Vite hace que la integración de preprocesadores sea increíblemente sencilla gracias a su diseño moderno. A diferencia de herramientas más antiguas donde necesitabas configurar loaders complejos, en Vite solo necesitas instalar el preprocesador como dependencia de desarrollo.
Por ejemplo, si quieres usar Sass, simplemente ejecutas npm install -D sass en tu terminal. Una vez instalado, puedes cambiar la extensión de tus archivos de .css a .scss o .sass y Vite se encargará de compilarlos automáticamente en tiempo real.
Luego, solo tienes que importar ese archivo directamente en tu JavaScript o TypeScript usando import './estilos.scss'. Vite detecta la extensión, procesa el código Sass, lo convierte a CSS puro y lo inyecta en el navegador de forma instantánea gracias a su sistema de Hot Module Replacement (HMR). Es una experiencia de desarrollo fluida y sin fricciones.
Los preprocesadores como Sass o Less extienden CSS para hacerlo programable. Su valor real reside en la modularidad y la eficiencia.
Pilares fundamentales
Hoy en día 18/05/2026 solo se necesita ejecutar el siguiente comando:
npm i sass -D
Bueno, tuve el problema de que no corrió Sass, instalando la dependencia no funcionó. Less en cambio instalando la dependencia funciona.
Tal vez cambió el modo para sass o tal vez ya viene instalado por defecto, tocaría revisar la documentación.
