4

将 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？

4

2 回答 2

3

一段时间以来，Angular 一直不赞成使用~for Sass@use和@import语句。

正式地，从 Angular 版本 13开始，将不再支持使用波浪号导入。

于 2021-11-27T15:53:15.347 回答
0

要使用@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：有时我在使用本地库时必须手动删除该文件夹。因此，如果在构建过程中发生奇怪的事情，请尝试此操作。

于 2022-02-07T13:54:55.547 回答