After upgrading an Angular 12 project to Angular 13 I encountered an issue where SCSS was no longer to locate a shared style sheet in a library. It appears that that Tilde (~) no longer resolves to node_modules.
Broken:
@use '~my-angular-lib' as lib;
Works:
@use '../node_modules/my-angular-lib' as lib;
I noticed that angular material just directly refences '@angular/material' as of Angular 13 but I can't figure out how to get that to work with my library. It seems kind of hacky to use a relative path to mode_modules every time.
What is the current best method of refencing a style sheet in node_modules, or what am I missing to where ~ no longer points to node_modules?
Angular has been deprecating the use of ~ for Sass @use and @import statements for a while.
Officially, as of Angular version 13 the usage of tilde imports won't be supported anymore.
To use @use 'my-angular-lib' as lib; you need to make sure to export the relevant files in your angular libraries package.json and ng-package.json files (see https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md).
Here my configuration for example:
// package.json
...,
"exports": {
".": {
"sass": "./src/lib/_index.scss"
}
},
...
// ng-package.json
...,
"assets": [
"./src/lib/_index.scss",
"./**/*-theme.scss"
],
...
All my theme related component files have the suffix -theme and I have one scss file (_index.scss) that contains only one @mixin to @include theme specific component styles. For example:
// src/lib/_index.scss
@use './some/some-component-theme' as *;
@mixin lib-theme($theme) {
@include some-component-theme($theme);
}
Hint: Sometimes I had to manually remove the .angular/cache folder when working with local libraries. So try this if something odd happens during the build process.