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
@usey@forwarden lugar de@import(deprecated).
- Encapsula y organiza: una carpeta
abstracts, unindex.scss, y listo.
- Carga lo justo: nada de reset.css en todos los componentes.
- Usa
ViewEncapsulation.Emulatedpara evitar fugas de estilos.
- Evita usar
as *siempre. Nómbralo cuando puedas:@use 'mixins' as mixins.
Written by Pol Valle
I'm particularly drawn to building apps that are not only functional but also visually appealing and easy to use. I do it by applying SOLID principles, clean architecture and testing to ensure quality.