After implementing the SASS code in my component's style, it functions correctly.
$test-color: pink;
div{ background-color: $test-color; }
However, when I transfer the definition to styles.scss, the desired outcome is not achieved. I have attempted using the (supposedly deprecated)
@import "../styles.scss";@use "../styles.scss";. Additionally, I tried moving the color definition to colors.scss and referencing it in angular.json. The styles for classes declared in styles.scss are working fine (even without importing/using because they are referenced in the assets), but the variable is not functioning.
Some sources suggest that it should work with @include. The documentation illustrates how to assign values, however, links provided did not provide any clarity on resolving the issue at hand. Despite trying additional configuration options like:
"stylePreprocessorOptions": { "includePaths": [ "src" ] }
The error message persists as seen below:
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
Despite researching the error online, no satisfactory solutions were found. What steps should be taken to further investigate and resolve this issue?