How to export stylesheets from Angular libraries?

Question

Recently I've started splitting up a large angular project into seperate libraries. This worked fine until I tried to create a library with the css variables that are used by all other libraries. This is the current structure of the project:

- projects
  - library1
  - ... (more libraries)
  - style library
    - src
    - styles
      - _variables.scss
    - ng-package.json
    - package.json
    - tsconfig.lib.json
- src
  - app
    - app.components.scss
    - app.module.ts
- angular.json
- package.json
- tsconfig.json

According to various articles that I found this is the way to export stylesheets from a library:

1. Add the style as an asset in the ng-package.json file. This looks like this in the style library:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/styles-library",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [
    "./styles/_variables.scss"
  ]
}

2. Add an exports entry in the package.json

{
  "name": "@styles-library",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^16.2.0",
    "@angular/core": "^16.2.0"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "sideEffects": false,
  "exports": {
    "./variables": {
      "sass": "./styles/_variables.scss"
    }
  }
}

And that should be it. But when I install the style library in library1 and try to to use stylesheet in any component then I get the error that the stylesheet can't be found. I tried to import the stylesheet like this:

@import "@styles-library/variables";

When I look in the node_packages of library1 then I can see the @styles-library with the _variables.scss stylesheet. The weird thing is that when I try to do the same thing in the main project (that showcases the libraries), then it does work. I also installed the @styles-library in the main project and then did the same stylesheet import in the app.component.scss file. When I served the application I could see that there were no errors and the styles were applied.

So my question: how come a stylesheet exported from a library can't be found in a different library but can be found when imported in a regular project?

Update

I was able to import the styling from styles-library into library1 when I changed the import to this:

@import "@styles-library/styles/_variables";

I'm still not sure why the path defined in the package.json from the styles-library doesn't work in another library but this is an okay alternative.