angular - 如何在 Angular 库中添加 Bootstrap

Question

我的版本是:

1. npm v6.14.12
2. node v10.24.1
3. angular-cli v8.0.2

我用这些命令创建了一个库:

第 1 步:ng new my-workspace --create-application=false

第二步:cd my-workspace 然后ng 生成库my-lib

第 3 步:cd projects/my-lib/src/lib

第四步:npm install bootstrap --save

之后我可以看到 my-workspace/projects/my-lib/package.json

  "dependencies": {
    "bootstrap": "^5.0.1"
  }

但现在我被困住了。我被告知在 style.css 或 angular.json 中添加 Bootstrap 。但是这些文件不会用于库代码。请告诉我如何进行此操作。我发现的几乎所有文章都是针对成熟的 Angular 应用程序的。

这意味着

Answer 1

您的问题可能不是关于如何将 Bootstrap 添加到 Angular 应用程序，而是关于如何将 Bootstrap 添加到 Angular 库。

以下方法可能会解决您的问题。

首先在my-workspace/projects/my-lib/package.json的peerDependencies部分添加bootstrap，如下:

 "peerDependencies": {
     ...
     "bootstrap": "^5.0.1",
     ...
 }      

当您的 Angular 库被用作另一个 Angular 项目的依赖项时，这将安装 Bootstrap 。

然后创建 .scss 文件并将以下行放入文件中，然后在相应的组件中指定它。

@import "node_modules/bootstrap/scss/bootstrap"

在包含您的库的 Angular 项目的 package.json 的 devDependencies 部分中添加 Bootstrap ，如下所示。这将允许您在开发库时使用 Bootstrap 。

"devDependencies": {
    ...
    "bootstrap": "^5.0.1",
    ...
  }