Importing style library

I have a library just for styling and it has the following structure:

@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
}


After the build the structure looks like this:

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


Importing into an app after installing the library: angular.json:

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


With this import, it is possible to use classes declared as .my-button

app.component.html:

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


This way the styles are applied, but when trying to import the styles.scss file to use the variables:

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


generates an error:

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


What am I doing wrong?

Because in this same app, I installed bootstrap and the import works both in angular.json and in styles.scss.

Continue reading...