¿Hay alguna forma de hacer que el archivo global con variables scss esté disponible para todos los componentes?

Sin importar el archivo global cada vez en cada componente, desea que esas variables sass estén disponibles, no es posible.

La forma en que funciona en SASS , si usa parciales para organizar mejor el código, puede aplicar la directiva @import para la referencia. Entonces, si hay algunas variables sass en shared/_variables.scss :

 $lightslategray: #778899; $darkgray: #A9A9A9;

y estas variables deben usarse en otra hoja de estilo, la hoja de estilo con ellas debe @importarse primero:

 // Shared @import "shared/variables"; .content { background: $lightslategray; }

En Angular funciona de manera similar (hoja de estilo externa de referencia relacionada). Entonces, si necesita que un component.scss en particular use algunas sass variables, mixins or functions , no hay otra forma limpia, sino hacer referencia a ellos en ese component.scss usando la directiva @import . Para facilitar la tarea, puede crear un archivo src/_variables.scss y usar una sintaxis como esta en su component.scss :

 @import “~variables.scss”;

Solo necesita agregar un poco más de configuración, por lo que cuando declara sus variables globales, debe envolverlo en :root{} . Entonces en src/styles/settings/_variables.scss .

 :root { --blue: #00b; // or any global you wish to share with components }

Luego, cuando los use en el SCSS, deberá acceder a ellos así.

 .example-class { background-color: var(--blue) }

Para agregar a esto con respecto a los comentarios, este método puede usar mixins , @media y keyframes y no se limita solo a colores/fuentes. Ese fue un ejemplo.

Según tengo entendido, necesita un archivo global src/assets/style/global y luego importar cada archivo scss allí donde los está definiendo así.

 @import 'filename';

Si no desea que se utilicen variables globales dentro de un componente, mire cuando tenga las variables globales funcionando. Busque ViewEncapsulation , ya que esto se puede usar para ignorarlos.

En angular 8 funciona para mí.

En tu archivo _variable.scss tienes que añadir:

 :root{--my-var:#fabada}

Después de eso, ingrese a su angular.json y agregue esto en "estilos":

 {"input":"yourPath/_variables.scss"}

paso uno: vaya al archivo scss personalizado (shared/css/_variable.scss) y escriba esta parte

 :root{ --color-text: red; --color-btn-success: green; }

después de ir a style.scss (este es el archivo principal) e importar este archivo:

 @import './shared/css/Variables';

ahora puede usar variables en todos los componentes con esta sintaxis:

 .sample{ color : var(--color-text); }

Es posible acceder fácilmente a los estilos sass desde un archivo global con dos pasos.

1. Agregue la ruta de la carpeta de los archivos de estilo a la matriz includePaths en el archivo angular.json .

• 2. Importe el archivo de estilo por nombre de archivo en cualquier componente.

angular.json

 "architect": { "build": { ... "options": { "stylePreprocessorOptions": { "includePaths": [ "src/styles/var" // add path only, do not include file name ] }, "styles": [ ... ] } ... } }

some-component.scss

 @import "var"; mat-toolbar { height: $toolbar-height; }