如何在 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

步骤2: cd my-workspace，然后ng generate library my-lib

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

步骤4: npm install bootstrap --save

完成后，我可以看到my-workspace/projects/my-lib/package.json

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

但是现在我陷入了困境。我被告知要将Bootstrap添加到style.css或angular.json中。但对于库代码，这些文件将不存在。请告诉我如何继续进行。我找到的几乎所有文章都是针对完整的Angular应用程序的。

这意味着

- Tanzeel

Answer 1

也许您的问题不是关于如何向Angular应用程序添加bootstrap，而是关于如何向Angular库中添加bootstrap。

以下方法可能有助于解决您的问题。

首先，在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",
    ...
  }

- Salahuddin Ahmed

---

正是我所需要的。谢谢。这个有效。 - Tanzeel

Answer 2

我们需要在angular.json文件中添加以下内容，以完成Bootstrap的安装。

"styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
 ],


 "scripts": [
     "node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]

您还可以在这里查看更多内容：如何将Bootstrap添加到Angular-cli项目中

请按照此指南了解有关库创建的更多信息：https://angular.io/guide/creating-libraries

- Ganesh

---

一旦您完成创建过程，我们可以将lib视为普通的Angular项目，并且依赖项导入也是如此。我认为您在这里弄错了事情，即cd projects/my-lib/src/lib。请重新检查您的node-modules安装。 - Ganesh

Answer 3

在你的src/style.css中直接导入

@import '~bootstrap/dist/css/bootstrap.min.css';

- frendy wijaya