Currently I'm struggling with this topic some time, so I can extend the answer about how to do it if your library is configured outside of your app and you want to import the styles from it.
Just a reminder that @import annotation is now deprecated (https://sass-lang.com/documentation/at-rules/import/)
Note: This solution works for angular 19 and ng-packagr 19 version.
To make it work in by using ng-packagr
, according the documentation
https://angular.dev/tools/libraries/creating-libraries#managing-assets-in-a-library,
you need to create an _index.scss
file and manually point to it in your package.json
by adding "exports" section like that:
"exports": {
".": {
"sass": "./_index.scss"
}
}
To your ng-package.json
you need to add the assets:
"assets": ["src/assets", "./_index.scss"] // src/assets contains your all scss files
Then in your index file you need to forward your all styles inside:
@forward './src/assets/some-scss-in-my-lib'
@forward './src/assets/some-scss-in-my-lib_2'
And then in your main app to properly fetch all those styles you just need to do the following:
@use '@your-shared-library-name' as *
If you have just one scss file in your library I guess you can put your styles to the _index.scss
without forwarding.