Import SCSS color variables in Angular component not working

Question

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.

Are you sure the rule isn't being overwritten somewhere else? — compuphys
– compuphys, Commented Apr 22, 2020 at 17:17
I'm sure, it's a really small app. In fact, if I change the value .some-class { background-color: blue; } it works. But if I use the variable it does not work anymore. — saci
– saci, Commented Apr 22, 2020 at 17:28
Nope, I get a compilation error: SassError: There is no module with the namespace "colors". — saci
– saci, Commented Apr 22, 2020 at 17:32

Aaron Adrian · Accepted Answer · 2020-04-22 17:35:16Z

10

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';

answered Apr 22, 2020 at 17:35

Aaron Adrian

5293 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

saci Over a year ago

Thanks for the help but it's not working. I moved the colors file to src/styles but no luck either.

Aaron Adrian Over a year ago

Can you try restarting ng serve? It's not triggered by changes to angular.json, so you have to manually restart it.

saci Over a year ago

I did it but same result. The thing is I've always had color variables in older projects and it was always working. I'm wondering if this is an Angular 9 issue...

saci Over a year ago

It works, thanks for the help. I had put the stylePreprocessorOptions wrong. Yesterday, after struggling all day with this problem, I was no longer thinking clearly.

kdan · Accepted Answer · 2024-06-02 03:04:04Z

0

In folder "src" create "scss" folder with files you need to import, for example _colors.scss.
Modify angular.json adding "stylePreprocessorOptions" property:

"styles": ["src/styles.scss"],
"stylePreprocessorOptions": { "includePaths": ["src/scss"] },

Import your css or scss file in your component's style template file like this:

@import "_colors.scss";
// or
@import "_colors";
// or
@import "colors";

Use your variables like this:

.discount-value {
    color: $color-orange-normal;
  }

P.S. You won't be able to open a file imported using this method in vscode by pressing alt + left-click

answered Jun 2, 2024 at 3:04

kdan

1131 silver badge5 bronze badges

Collectives™ on Stack Overflow

Import SCSS color variables in Angular component not working

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related