Angular: Global Variables on Styles scss to share among all components

Question

I know this is a very asked question, but I can't seem to find the proper way of setting my project. In Angular 12, I'm trying to set a file of variables to share among all components without importing it in every scss file, and I'm trying to set it up in the styles.scss file, but it doesn't seem to be working properly. I'm getting an " undefined variable " error.

My variables file:

$primary-color: #efefef;
$light-color: #454758;
$main-font:  #ACADB4;
$main-font-regular: #6E707D;
$main-font-light: #3c3c3c;
$rich-black: #001011;
$primary-white: #fafafa;

Here's how I'm importing it in styles.scss:

/* FONT AWESOME */
@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "~@fortawesome/fontawesome-free/scss/solid.scss";
@import "~@fortawesome/fontawesome-free/scss/regular.scss";
@import "~@fortawesome/fontawesome-free/scss/brands.scss";

/* MDB CSS */
@import "~mdb-angular-ui-kit/assets/scss/mdb.scss";

/* VARIABLES */
@import "styles/_variables.scss";

My angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1, 
  "newProjectRoot": "projects",
  "projects": {
    "CVWebPage": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/CVWebPage",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css", 
              "src/styles.scss",
              "src/styles/_variables.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "./src/styles" 
              ]
            },
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "vendorChunk": true,
            "extractLicenses": false,
            "buildOptimizer": false,
            "sourceMap": true,
            "optimization": false,
            "namedChunks": true
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          },
          "defaultConfiguration": ""
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "CVWebPage:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "CVWebPage:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "CVWebPage:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.scss",
              "src/styles/_variables.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.slim.min.js",
              "./node_modules/popper.js/dist/umd/popper.min.js",
              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "CVWebPage:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "CVWebPage:serve:production"
            }
          }
        }
      }
    }},
  "defaultProject": "CVWebPage"
}

And I'm just using it in a Component scss file like this:

color: $primary-white;

My project structure:

I've tried doing the same this post does but couldn't make it work: How to use global scss files in angular-cli project

Thanks for the help!

Answer 1

In order to use varibles in css , you have to do something like this:

1. In yor variables.scss, define your variables inside :root *, something like:

:root {
    // Your colors    
   --color-primary-color: #efefef;
   --color-light: #454758;
   --color-main-font:  #ACADB4;
... 
}

2. Then, in your main.scss (or in wherever you want), use these variables with var() , like this:

color: var($primary-white);

I leave you HERE a link to an article about CSS Custom Properties (vars) with SASS/SCSS (a practical architecture strategy)