Global SCSS Variables for Angular Components Without Importing Them Everytime

Angular SCSS Global Variable Import

You don't need to import variables everytime consider this example

theme.scss

$primary-color:#00b289;
$secondary-color:#505050;

@import "components/_checkbox";
@import "components/_button";

as you can see I only decalre my variables once and I can use the variables inside my partial sass file.

another way is to create a partial sass file include all your variables and imported once

theme.scss

@import "_variables.scss";
@import "components/_checkbox";
@import "components/_button";

How to have Bootstrap's scss variables globally in Angular without importing theme every time in each component?

This is not possible. Each component style is compiled separately.

https://github.com/angular/angular-cli/issues/3700

What you can do is specify the stylePreprocessorOptions in .angular-cli.json file so that you can import variables like

@import 'variables';

Instead of something like

@import '../styles/_variables.scss';

It's just more convenient, but you still have to include it in each component scss file

Why @use and @include works in global scss file but not components scss files?

Finaly came to a solution in that Denis Pasin's article.

So I just needed to update create two mixins:
themed for components style
gthemed for globals style

@mixin themed() {
    @each $theme, $map in $themes {
        :global(.theme--#{$theme}) & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map-get(map-get($themes, $theme), "#{$key}");
                $theme-map: map-merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }
            @content;
            $theme-map: null !global;
        }
    }
}

@mixin gthemed() {
    @each $theme, $map in $themes {
        .theme--#{$theme} & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map-get(map-get($themes, $theme), "#{$key}");
                $theme-map: map-merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }
            @content;
            $theme-map: null !global;
        }
    }
}

---

Related Topics