How do I declare/include an imported scss folder in my library so I can call @import it in my application's scss files?

The Goal:

I am trying to include a path from my library so I can use an @import statement to include the scss files in my application like so:

@import "some-scss-in-my-lib"

The Problem:

Unfortunately everytime I try to serve my application I am getting the following compiler error:

SassError: Can't find stylesheet to import.

What I've already tried:

• Looking up the search on Stackoverflow brought me this thread which describes the same problem as I'm facing now. And I've tried to include the path with the styleIncludePaths property just like Zainu suggested but when trying to serve the application I've ran in to the exact Problem as described in The Problem-Section above.

• I tried to set the stylePreprocessorOptions property like GreatHawkeye in the first post and it was possible to @import the scss file after using ng build, but I can't understand how and why this is working for stylePreprocessorOptions but not styleIncludePaths?

• I also tried searching on google which lead me to the Thread Unable to get styles bundled using styleIncludePaths option where I found an answer by Alan Aguis, but unfortunately there was no real explanation what styleIncludePaths really is for. The only thing that Alan Aguis said was:

that is because styleIncludePaths is indented for something else.

But as said, he didn't say for what exactly styleIncludePaths is, which confused me even more.

I also tried to lookup the ng-packagr github page regarding the documentation about Add Style Include Paths on the Thread How to use "styleIncludePaths" but the result was still the same and I couldn't find a clear answer to my problem.

Questions about this Issue:

1. When is styleIncludePaths in ng-package.json used? Is it used for published packages only?

2. When is stylePreprocessorOptions in angular.json used? Is it used for the dist version only after running ng build?

3. What in general is the difference between styleIncludePaths from ng-package.json compared to stylePreprocessorOptions from angular.json?

4. How do I declare/include an imported scss folder in my library so I can call @import it in my application's scss files?

I'm pretty much sure that I'm wrong in my suggestions but I'd like to know what is going on and how to resolve my issue.

Any help on this is as always highly appreciated! 🙏🏻

As answered on github, I quote alan-agius4:

The includes paths are used by CSS processors during the build of a library to resolve imports when processing scss/less/stylus files. In your ship unprocessed scss files, these paths will need to be included at application level instead of the library level, because such files will not be handled by the library build pipeline, but the application’s. They are just copied as static files. In case you don’t want to include such paths at application level, you can leverage webpack’s tilde import syntax ex:

@import "~/my-lib/scss/mixins”.

Note: webpack specific features are not official supported by the Angular tooling team and might break without warning.