Angular: Usar SASS @import sin importar su ubicación real
08/02/2021 por Capy

Front.id

Imagina este escenario: Tienes un archivo _variables.scss con todas las variables listas para usar pero no quieres tener que copiar dichos archivos en cada modulo que lo necesite.

Mas bien te gustaría poder hacer un simple @import "variables";  en el archivo sass de tu componente no? pues sigue leyendo :)

Para lograr dicha funcioonalidad vamos a editar el archivo angular.json ubicado en la raiz de tu proyecto. Busca la key "stylePreprocessorOptions" y define (o añade) dentro de ella lo siguiente:

"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles/utils",
    "src/styles/business-utils"
  ]
},

Lo que hemos hecho aquí es decirle a aungular que exponga dichos directorios ("src/styles/utils" y "src/styles/business-utils") allí donde se compile un archivo SASS, lo que nos permite hacer un @include de cualquier archivo que se encuentre ahí, en nuestros componentes.

Así de facil.

Chau!

Add new comment

The content of this field is kept private and will not be shown publicly.

HTML Restringido

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.