# 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.

{% hint style="info" %}
Vite és l'electricista que pot endollar un aparell, però nosaltres hem de posar l'endoll (el compilador sass).
{% endhint %}

### 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.

```bash
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.

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