Angular Multi Library in a Workspace

Question

In order to manage my own projects better in Angular, I will create some libraries named ngx-suffa in the workspace. Each library will be under the same workspace.

For example: @ngx-suffa/core, @ngx-suffa/styles, @ngx-suffa/forms

The structure I want here is as follows: @ngx-suffa/core and @ngx-suffa/styles should be as dependencies in the @ngx-suffa/forms library. In other words, when I develop a custom TextBox or SelectBox in ngx-suffa/forms, I can use the colors.scss in the styles.

For this I tried: @ngx-suffa/styles - ng-package.json:

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

I want to use this in a scss file for the component in @ngx-suffa/forms:

@use "@ngx-suffa/styles/styles/colors";

:host {
 background-color: colors.$orange-500;
 color: colors.$indigo-500;
}

However, during the @ngx-suffa/forms build, the following error occurs:

X [ERROR] Can't find stylesheet to import.
 ╷
1 │ @use "@ngx-suffa/styles/styles/colors";
 │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ╵
 projects\forms\src\lib\forms.component.scss 1:1 root stylesheet [plugin angular-sass]


✖ Compiling with Angular sources in Ivy partial compilation mode.
An error has occuried while processing D:\Projects_Next\ngx-suffa\projects\forms\src\lib\forms.component.scss.

When I publish the same @use line to @ngx-suffa/styles library and use it in another Angular Application, it works fine.