如何将 Bootstrap 集成到 angular CLI 项目中

Question

我对将 bootstrap 集成到 angular 中比较陌生，我从运行开始 npm i --save bootstrap@3 命令将所需文件下载到我的 angular 项目的 node_modules 文件夹中。

但是，当我去angular.json文件中输入相对路径到"styles"部分时，出现了以下错误：

 "styles": [
              "src/node_modules/boostrap/dist/css"
            ],

ERROR in multi ./src/node_modules/boostrap/dist/css Module not found: Error: Can't resolve 'C:\Users\User\Desktop\ShoppingOnline\client\yoavonlineshop\src\node_modules\boostrap\dist\css' in 'C:\Users\User\Desktop\ShoppingOnline\client\yoavonlineshop'

我确保使用了反斜杠。 angular 节点模块文件夹在 src 文件夹之外。我需要升一级吗？ ../？输出路径为：

"outputPath": "dist/YoavOnlineShop",

edit：谢谢大家，现在不会报错了。但是，未应用 bootstrap 的样式。我是否需要在 app.module 或特定组件中添加任何内容？

在像上面那样集成 bootstrap 之前，我使用了 CDN，它运行良好，但现在我想我把它弄坏了。

Answer 1

试试这个：

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

它在 src 文件夹外，但在 angular 项目内，因此您可以如上所示访问它。

如果您想在本地加载特定版本以及如何使用它，请检查 this guy here。

Answer 2

像这样更改路径

 "styles": [
                  "src/styles.css",
                  "node_modules/bootstrap/dist/css/bootstrap.min.css",
                  "node_modules/font-awesome/css/font-awesome.css",
                  "node_modules/toastr/build/toastr.min.css"
                ],

为什么 node_modules/bootstrap 不是 src/node_modules/bootstrap 因为来自当前 angular.json 文件的 angular 路径是 nodue_models CLI 会处理的。请记住 dist 路径的形成和最小化也由 cli 而不是您的代码明确处理。

Answer 3

安装bootstrapjquerypopper.js和font-awesome 我们需要录音这个请求

npm install bootstrap jquery popper.js and font-awesome

并且在angular.json中我们放置所有元素的相对路径

"root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/salam-angular",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
        

"styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css",
              "./node_modules/font-awesome/css/font-awesome.min.css"
            ],
            "scripts": [
              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
              "./node_modules/jquery/dist/jquery.min.js",
              "./node_modules/popper.js/dist/popper.min.js"
            ]

如何将 Bootstrap 集成到 angular CLI 项目中

How to integrate Bootstrap into an angular CLI project

angular-ui-bootstrap

angular