2

When I apply the following SASS in my component's style, it works as supposed to.

$test-color: pink;
div{ background-color: $test-color; }

However, when I move the definition to styles.scss, it doesn't. I've tried adding the (now, apparently, deprecated) @import "../styles.scss"; and also the currently recommended @use "../styles.scss";. I even tried to put the color definition in colors.scss and add that reference to angular.json. The styles for classes declared in styles.scss work (even without importing/using, due to it being references in the assets). But the variable, doesn't.

According to this suggestion, it should work with @include. In this docs, it's shown how to assign the values. I found this linking to this but I can't see how that differs from my case. I tried to understand this blog but couldn't see any relevant hints on what I'm doing wrong. I also tried adding the following (as shown here).

"stylePreprocessorOptions": { "includePaths": [ "src" ] }

I still get the error below, though.

ERROR in ./src/app/.../some.component.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined variable.
14 │ background-color: $test-color;
___ │ _________________ ^^^^^^^^^^^^
src\app...\some.component.scss 14:23 root stylesheet

Googling the actual error gave me this saying that the variable isn't there. But as far I can tell, it is! A related, although a bit different, question was asked here but with no relevant answer.

What am I missing and how do I investigate it further?

Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438

1 Answers1

4

The error is due to wrong syntax as pointed out. It needs to reference the source of the colors.

background-color: colors.$test-color;

Furthermore, the import is required but needs to be done by reference to the module and not to the file.

@use "colors";

In a wholesome code base, one should put the following in the file src\colors.scss.

$test-color: pink;

Then you could use it like this.

@use "colors";
div{ background-color: colors.$test-color; }

In the config file angular.json, the following needs to be set.

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

Also, it's should be noted that files prefixed by an underscore are subject to a different processing and as such, _colors.scss is preferred. While it's valid and working to place the auxiliary files directly in /src (as is the case with styles.scss, the convention dictates to place them in /src/assets/styles, altering the pre-processor's options as below.

"stylePreprocessorOptions": { "includePaths": [ "src/asses/styles" ] }
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
Normunds Kalnberzins
  • 1,213
  • 10
  • 20
  • I'd like to keep your answer's contents as-is but I'll take the liberty to amend the precise change that was missing in my case (to align your answer to the question's exact formulation, while retaining the extra info that may come in handy for the future readers). I hope it's fine by you. – Konrad Viltersten Nov 22 '21 at 07:49
  • perfect, almost, yes, I tried to write "what works" and maybe skipped on details. Though regarding your modifications: IMO more specific value(s) in "includePath" should be preferred over just "src". Also _color.scss (not processed unless use/import) should be preferred over color.scss – Normunds Kalnberzins Nov 22 '21 at 09:42
  • Are you saying that the underscore in the file name actually implies a different process? I was not aware of that. Please confirm. Also, the path should be set according to the conventions, as not to surprise the next dude or dudess. I'll add both to the edit. – Konrad Viltersten Nov 22 '21 at 10:39
  • I see now how your code was correct from the start. However, when coming back to SASS'ing after a year of backend work, it seems easier to explain things step-by-step (at least in my opinion). Let me know if the latest edit erases the *almost* in your *perfect, almost, yes*. – Konrad Viltersten Nov 22 '21 at 10:45