从 Angular 13 开始，SCSS @use 语句中的波浪号 ~ 不再解析为 node_modules答案

【问题标题】：Tilde ~ in SCSS @use statement no longer resolving to node_modules as of Angular 13从 Angular 13 开始，SCSS @use 语句中的波浪号 ~ 不再解析为 node_modules
【发布时间】：2022-01-02 01:16:08
【问题描述】：

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

破碎： @use '~my-angular-lib' as lib;

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

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

目前在 node_modules 中引用样式表的最佳方法是什么，或者我错过了什么 ~ 不再指向 node_modules？

【问题讨论】：

标签： angular sass angular13

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

要使用@use 'my-angular-lib' as lib;，您需要确保在您的角度库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 文件夹。因此，如果在构建过程中发生奇怪的事情，请尝试此操作。

【讨论】：