Configuració inicial

Vite i els Preprocessadors CSS

• Vite no porta el compilador de Sass preinstal·lat per defecte, però sí que hi dona suport de forma nativa (sense necessitat de configuració addicional).

• Vite està dissenyat per se minimalista i ràpid. La seva filosofia és no incloure eines que no són estrictament necessàries per al funcionament bàsic, ja que això faria en bundle més pesat per a tothom.

• Vite té suport nadiu per detectar i processar fitxers .scss o .sass. Això vol dir que no és necessari configurar res al fitxer vite.config.js.

• El que sí necessita Vite és el mòdul compilador real. Aquest és el mòdul sass.

• El sistema de construcció de Vite comprova si es té un fixer .scss a l'aplicació. Quan el troba, busca el paquet sass a la carpeta node_modules.

Vite és l'electricista que pot endollar un aparell, però nosaltres hem de posar l'endoll (el compilador sass).

Configuració inicial amb Sass i Vite

Abans de començar amb el Sass amb Vite, ens hem d'assegurar que Vite pot compilar fitxer Sass.

Instal·lar el preprocessador Sass

Com que Vite té suport integrat per Sass, només cal instal·lar el paquet com a dependència de desenvolupament.

npm install -D sass

Amb això, Vite detectarà automàticament els fitxers .scss o .sass i els compilarà a CSS.

Crear el fitxer d'estils personalitzats

Es pot crear un fitxer principal pels estils (per exemple, a src/scss/custom.css).

Aquest fitxer serà on es realitzen les importacions i les personalitzacions.

Importar el fitxer a l'aplicació

En el fitxer principal de JavaScript (per exemple, main.js) Afegir la següent línia.

// Afegeix aquesta línia al teu fitxer principal de JS
import './scss/custom.scss';