# Installation & Quick Start


```
yarn add energy-foundations
```

```
npm install energy-foundations
```

## Contenido

#### CSS

Importar el CSS compilado una sola vez en el entry point de la aplicación (no dentro de componentes). Si se van a usar otras librerías Energy, este import debe ir el primero.

En main.ts:

```ts
import 'energy-foundations/dist/style.css'
```

#### Sass (CSS base opcional)

Si prefieres emitir el CSS base de Foundations desde tu pipeline Sass, usa la entrada:

```scss
@use 'energy-foundations/dist/style.scss';
```

No mezcles ambas rutas (CSS en JS y Sass) para evitar duplicar el CSS.

#### Sass (variables y mixins)

Para seguir consumiendo las variables y mixins Sass como antes, el paquete publica las fuentes en `src/` y se consumen con `@use` (Sass Modules):

- `rds-reset.scss`
- `rds-variables.scss`
- `rds-foundations.scss`
- `global.scss` (agrega los anteriores)

## Uso

En una aplicación SPA, para optimizar la carga, se recomienda diferenciar los ficheros que contienen clases de los que contienen mixins y variables. 
Para ello, los primeros se deben importar una única vez. 

Esto lo encontramos en `style.css`.

Se recomienda importar `dist/style.css` en el entry point (ej. `main.ts`). Evitar `<style src="...">` dentro de componentes.

#### Variables y mixins

Recomendamos crear primero un fichero `basic.scss` en vuestro directorio raíz y usar `@use` en vez de `@import`:

**basic.scss**
```scss
@use 'energy-foundations/src/rds-variables' as rds;
// ejemplo de uso namespaced
// .example { color: rds.$color-primary; }
```

Posteriormente, en el fichero de vite.config:

**vite.config**
```js
css: {
  preprocessorOptions: {
    scss: {
      // inyecta tu setup de variables/mixins
      additionalData: '@use "./src/styles/basic" as *;'
    }
  }
}
```

De esta manera, estos estilos serán accesibles a todos los componentes del proyecto Vue.

Para usar los estilos desde `node_modules` en desarrollo local, añade:

**vite.config**
```js
server: {
  fs: {
    allow: [".."]
  }
}
```

### Migración rápida (de @import a @use)

- Antes: `@import 'energy-foundations/dist/style.css';`
- Ahora: `import 'energy-foundations/dist/style.css'` en `main.ts`.

- Antes: `@import 'energy-foundations/dist/rds-variables.scss';`
- Ahora: `@use 'energy-foundations/src/rds-variables' as rds;`

Nota: `@import` de Sass está deprecado y será eliminado en Dart Sass 3.0. Usa `@use/@forward`.
El entry `style.scss` no incluye `variables.css` (custom properties). Si necesitas esas variables en CSS, importa `dist/style.css` en `main.ts`.
