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

Question

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! 🙏🏻

Answer 1

I previously attempted what sounds like a pretty similar setup to yours that lead to a lot of research and trial and error. From everything I've tried, it essentially boiled done to:

styleIncludePaths is used when building a library and the stylePreprocessorOptions path is used when building/serving an angular application.

It would depend on the setup of your project, but if your library is configured outside of your app, and you then imported into your app without being built separately, the stylePreprocessorOptions would be used as the style import path for that library. Even though if it is configured outside of your application and has a defined ng-package file, if you are just importing it locally, angular will treat it the same as any other component/module already inside of the app and will need to use the stylePreprocessorOptions to resolve any scss import paths.

On the other hand, if you were to build the library separately, and then pull in that built library, then the styleIncludePaths would be used to resolve any scss import paths when that library is built separately.

I wouldn't necessarily say the is a "difference" between the two. They both serve the same purpose to provide a base path to resolve scss imports, but styleIncludePaths is the syntax in a library's ng-package file when that library is built and stylePreprocessorOptions is the syntax for an angular application for when it is built.

As for your last question on how to "declare/include an imported scss folder in my library so I can call @import it in my application's scss files", I was not able to work out a more elegant solution, so they only way I could get that type of setup to work was to have the style sheets I wanted outside of the app/library I was working on and just configure the styleIncludePaths and stylePreprocessorOptions to reference the same files. That way I had one source for my style sheets which I could reference in both the styleIncludePaths and stylePreprocessorOptions.

This was definitely a pain of a process for me to wrap my head around, so I hope this helps.

Answer 2

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.