如何使用 ng-packagr 将 Angular 库的 scss 添加到捆绑中？

Question

我正在尝试创建基于 scss 主题的 Angular(ng 11) 库，我将通过私有 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 文件中。

projects/my-app/src/style.scss

@import 'my-lib/_material.scss'

我做了什么：

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

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": {
  }
}

进行这些更改后，我面临 2 个问题：

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

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

任何帮助或参考将不胜感激！

Answer 1

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

创建SCSS 主题文件（您已经完成）

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

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

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

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

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

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

Answer 2

ng-packagr 我也遇到过类似的问题。我还没有找到正确的方法，但解决方法是您可以简单地将 .scss 文件手动复制到最终版本。 您可以使用 ncp - 异步递归文件和目录复制 将文件复制到最终构建。

在最终构建命令之后添加 && ncp currentpathOfSCSSFile destinationPathOfFinalBuildDistFolder

只是一种解决方法，但它会解决这个问题；）