[Angular] Sass/Scss import/use clean up

Here is a quick hint for importing scss files in another scss file in angular. Normally you have to write the full file path into the import statement:

--import
@import 'apps/blog-hub-landing/src/styles/core/colors';
@import 'apps/blog-hub-landing/src/styles/core/variables';

--use
@use 'apps/blog-hub-landing/src/styles/core/colors';
@use 'apps/blog-hub-landing/src/styles/core/variables';

It's much cleaner if you add your style folders to the "stylePreprocessorOptions" object! You will find it in your angular.json under the options tag from your project's build declaration.
To fix my example above I would add something like this:

"stylePreprocessorOptions": {
    "includePaths": ["apps/blog-hub-landing/src/styles"]
},

Now you can change your imports to:

--import
@import "core/colors";
@import "core/variables";

--use
@use "core/colors";
@use "core/variables";

Angular Docs Reference: https://angular.io/guide/workspace-config#style-preprocessor-options