自 Angular 13 起，SCSS @use 语句中的波浪号 ~ 不再解析为 node_modules

Question

将 Angular 12 项目升级到 Angular 13 后，我遇到了 SCSS 不再在库中定位共享样式 sheet 的问题。波浪号 (~) 似乎不再解析为 node_modules.

损坏： @use '~my-angular-lib' as lib;

作品： @use '../node_modules/my-angular-lib' as lib;

我注意到 angular material 从 Angular 13 开始直接引用“@angular/material”，但我不知道如何让它与我的库一起使用。每次都使用 node_modules 的相对路径似乎有点老套。

在 node_modules 中引用样式 sheet 的当前最佳方法是什么，或者我遗漏了什么 ~ 不再指向 node_modules？

Answer 1

Angular 一段时间以来一直反对对 Sass @use 和 @import 语句使用 ~。

正式地，从 Angular 版本 13 开始 usage of tilde imports won't be supported anymore。

Answer 2

要使用 @use 'my-angular-lib' as lib;，您需要确保导出 angular 库 package.json 和 ng-package.json 文件中的相关文件（参见 https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md） .

这里以我的配置为例：

// package.json
  ...,
  "exports": {
    ".": {
      "sass": "./src/lib/_index.scss"
    }
  },
  ...
// ng-package.json
  ...,
  "assets": [
    "./src/lib/_index.scss",
    "./**/*-theme.scss"
  ],
  ...

我所有与主题相关的组件文件都有后缀 -theme 并且我有一个 scss 文件 (_index.scss) 只包含一个 @mixin 到 @include 主题特定组件样式。例如：

// src/lib/_index.scss
@use './some/some-component-theme' as *;
@mixin lib-theme($theme) {
  @include some-component-theme($theme);
}

提示：有时我在使用本地库时不得不手动删除 .angular/cache 文件夹。所以如果在构建过程中发生奇怪的事情，试试这个。

自 Angular 13 起，SCSS @use 语句中的波浪号 ~ 不再解析为 node_modules

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

angular

sass

angular13