May 29, 2025

Cómo importar SCSS en Angular sin rutas relativas ni globales (guía limpia y moderna)

Angular

Hace poco retomé un proyecto Angular que tenía el ViewEncapsulation desactivado y todo el SCSS importado globalmente. Clásico setup legacy donde todo se arrastra desde styles.scss, con imports tipo:

@import '../../../../../mixins.scss';

Un caos.

Me propuse organizarlo bien, usando las herramientas modernas de SCSS: @use y @forward, y con paths absolutos. Aquí te dejo la guía exacta para no repetir errores y dejarlo todo limpio para el futuro.

📁 1. Estructura base del SCSS

src/
├── styles/
│   ├── abstracts/
│   │   ├── _variables.scss
│   │   ├── _mixins.scss
│   │   └── _functions.scss
│   ├── base/
│   │   ├── _reset.scss
│   │   └── _typography.scss
│   ├── index.scss          # Encapsula todo con @forward
│   └── main.scss           # El SCSS global final

⚙️ 2. Configurar rutas absolutas en `angular.json`

"architect": {
  "build": {
    "options": {
      "stylePreprocessorOptions": {
        "includePaths": ["src/styles"]
      }
    }
  }
}

Con esto activado, puedes olvidarte de los imports relativos. Ahora:

@use 'abstracts/mixins' as *;

🔁 Sustituye a:

@use '../../../../../styles/abstracts/mixins' as *;

📦 3. Usar `@use` y `@forward` bien

`src/styles/index.scss`

@forward 'abstracts/variables';
@forward 'abstracts/mixins';
@forward 'abstracts/functions';

Este archivo actúa como punto de entrada a todo lo que necesites importar desde cualquier componente.

`src/styles/main.scss`

@use 'index' as *;
@use 'base/reset';
@use 'base/typography';

Aquí es donde cargas los estilos globales.

🧩 4. Cómo usarlo en los componentes

Una vez configurado todo, en cualquier SCSS de componente, simplemente haces:

@use 'abstracts/mixins' as *;

.card {
  @include shadow-md;
}

Sin rutas locas, sin globales, sin dolores de cabeza.

✅ 5. Buenas prácticas

Usa @use y @forward en lugar de @import (deprecated).

Encapsula y organiza: una carpeta abstracts, un index.scss, y listo.

Carga lo justo: nada de reset.css en todos los componentes.

Usa ViewEncapsulation.Emulated para evitar fugas de estilos.

Evita usar as * siempre. Nómbralo cuando puedas: @use 'mixins' as mixins.

Written by Pol Valle

I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.