angular - 如何使用 ng-packagr 添加 Angular 库的 scss 来打包？

Question

我正在尝试创建基于 scss 主题的 Angular(ng 11) 库，我将通过私有(private) npm 注册表在单独的项目中使用它。 现在我正在尝试将全局 scss 文件添加到我的库中并将其与我的库捆绑在一起。

我想要的:

假设我将我的 scss 保存在 projects/my-lib/src/styles/_material.scss 中:

// Import library functions for theme creation.
@import '~@angular/material/theming';

// Include non-theme styles for core.
@include mat-core();

// Define your application's custom theme.
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$theme: mat-light-theme($primary, $accent);

// Include theme styles for Angular Material components.
@include angular-material-theme($theme);

我希望我的包(库包)包含此 scss，以便在安装此库应用程序后可以将其导入到其全局 style.scss 文件中。

项目/我的应用程序/src/style.scss

@import 'my-lib/_material.scss'

我做了什么:

我从 angular Managing assets in library 开始关注这个文档

库 package.json(为了简单起见，我现在将 scss 文件保存在 src 文件夹之外):

{
  "$schema": "./node_modules/ng-packagr/package.schema.json",
  "name": "ui-sdk",
  "version": "0.0.1",
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/material.scss"
    ],
    "lib": {
      "entryFile": "src/public-api.ts"
    }
  },
  "peerDependencies": {
    "@angular/common": "^9.0.6",
    "@angular/core": "^9.0.6",
    "tslib": "^1.10.0",
    "ng-packagr": "^11.2.4"
  },
  "dependencies": {
  }
}

进行这些更改后，我面临两个问题:

1. ng 构建正在“projects/my-lib/dist”下添加库包
2. 库包不包含库文件夹 (my-lib)，因此无法解析路径。

有人能解释一下我们如何创建一个库，我可以在其中添加 Material 主题和扩展这些主题的应用程序可以使用该主题吗？ 我尝试了官方文档和其他来源，但没有找到解决方案。

非常感谢任何帮助或引用!

Answer 1

要从您的导入应用程序中获取您的主题 SCSS 文件，您需要；

创建 SCSS 主题文件(您已经完成)

使用 ng-package.json 文件复制 SCSS Assets

{
  ...
  "assets": [
    "./src/styles/_material.scss"
  ]
  ...
}

在 package.json 中导出虚拟访问路径(相对于您的库名称)

{
  ...
  "exports": {
    "./theming": {
      "sass": "./src/styles/_material.scss"
    }
  }
  ...
}

从导入/消费应用程序导入主题文件

@import "~@my-lib/theming";