79476007

Date: 2025-02-28 15:41:05
Score: 0.5
Natty:
Report link

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.

Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • User mentioned (1): @import
  • Low reputation (1):
Posted by: Rafciu