Can't use SASS variables in Angular from global file, despite other styles working-CodePudding

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?

CodePudding user response：

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" ] }