Importação de biblioteca de estilo em Angular [closed]

Possuo um biblioteca somente para estilo e ela tem a seguinte estrutura:

@mylib/
├── projects/
│ └── my-style-lib/
│ ├── src/
│ │ ├── lib/
│ │ │ └── ... (arquivos padrão da biblioteca)
│ │ ├── styles/
│ │ │ ├── colors.scss
│ │ │ ├── botton.scss
│ │ │ └── main.scss
│ │ ├── public-api.ts
│ ├── ng-package.json
│ ├── package.json
│ └── tsconfig.lib.json
├── angular.json
├── package.json
└── tsconfig.json


botton.scss:

@use "./colors.scss" as colors;
.my-botton {
background-color: colors.$primary
}


colors.scss:

$primary: #005F97;


main.scss:

@use './styles/colors.scss';
@use './styles/botton.scss';


ng-package.json:

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


package.json:

{
"name": "@mylib/styles",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^16.2.12",
"@angular/core": "^16.2.12"
},
"dependencies": {
"tslib": "^2.3.0"
},
"sideEffects": false
}


Após o build a estrutura fica dessa forma:

@mylib/
├── styles/
│ ├── lib/
│ │ └── ... (arquivos padrão da biblioteca)
│ ├── src/
│ │ ├── styles/
│ │ │ ├── colors.scss
│ │ │ └── botton.scss
│ │ └── main.scss


A importação em um app após a instalação da biblioteca: angular.json:

...
"styles": [
"./node_modules/@mylib/styles/src/main.scss",
"src/styles.scss"
]
...


Com essa importação, é possível utilizar as classes declaradas como .my-button app.component.html:

<button class="my-button">My button</button>


Desta forma o estilos são aplicados, mas ao tentar importar no arquivo styles.scss para utilizar as variáves:

@import '@mylib/styles/src/main';


gera um erro:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.


O que estou fazendo de errado? Pois nesse mesmo app, instalei o bootstrap e a importação funciona tanto no angular.json tanto no styles.scss.

Continue reading...