Import SCSS color variables in Angular component not working

I'm creating an Angular 9 app and my folder structure looks like this:

| app
  | app.component.ts
  | app.component.html
  | app.component.scss
| assets
  | _colors.scss

In the _colors.scss file I have two colors defined:

$red: #DA0000;
$blue: #1080E1;

In the app.component.scss I'm importing and using the colors like this:

@import '../assets/colors';

.some-class {
  background-color: $blue;
}

But this is not working, the color is not applied. And there are no errors. VSCode intellisense helps me with the import path so the path is ok. If I'm trying to use a not defined color like $black I get an error so it seems that the import it's working but the color is not applied. What I'm missing here? Any ideas? Thanks in advance.

You need to add the following to your project in angular.json:

{
  "projects": {
    "YOUR_PROJECT_NAME": {
      "architect": {
        "build": {
          "options": {
            "stylePreprocessorOptions": {
              "includePaths": ["src/assets"]
            },
          }
        }
      }
    }
  }
}

I recommend not storing it in assets but in something like src/styles or src/scss since assets gets published when you build the app. You don't really want people to be able to see/access the raw scss files.

You can then import as follows:

@import '_colors';