Tilde ~ in SCSS @use statement no longer resolving to node_modules as of Angular 13

user_17243743 0
Viewed 2913

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 node_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?

angular13 angular sass
3 Answers
user_85472140

I encountered the same problem and found the solution:

  1. Open angular.json file;

  2. In every app configuration set:

     "stylePreprocessorOptions": {
   "includePaths": [
     "./node_modules"
   ]
 }

  3. remove ~ in every import;

user_7448600

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.

user_58160970
Related