为什么我的 Angular 应用无法识别 bootstrap 样式？

Question

我运行 "ng new" 创建一个新应用程序并选择 SCSS 作为样式选项。我下载了 bootstrap，它仅以 .css 格式出现（我相信），应用程序无法识别任何 bootstrap 样式。 Angular 是否需要 bootstrap scss 文件？我该如何解决？

angular.json:

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

Answer 1

删除 ./ 并仅保留 node_modules/bootstrap/...。并尝试

Answer 2

在 Angular 中使用 bootstrap 时，您可能需要使用包装库，例如 ngx-bootstrap 或 ng-bootstrap。

制作这些包装器库是为了让您不需要使用 jquery 来执行某些操作，例如打开模式、触发警报等。

Angular 不鼓励使用 jquery，这可能会影响性能，如果您想了解更多信息，可以搜索此内容。

ngx-bootstrap 的安装说明可在 https://valor-software.com/ngx-bootstrap/#/documentation#getting-started and for ng-bootstrap https://ng-bootstrap.github.io/#/getting-started

找到

要决定选择 2 个库中的哪一个，之前有人在 Whosebug 上发布了一个问题：What is the difference between "ng-bootstrap" and "ngx-bootstrap"?

希望对您有所帮助！

Answer 3

我已经按照您描述的方式生成了一个新应用：

ng 新 'app name'
已选择路由
已选择 scss

然后使用 npm install bootstrap --save 和 npm install font-awesome --save 安装了 bootstrap。之后我复制了你所拥有的样式

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

您确定您的 node_modules 文件夹与您的 angular.json 文件位于同一目录中吗？

Answer 4

在 Angular.Json 中添加 bootstrap 文件后，您需要重新运行项目。之后只有更改适用于 project.If 这仍然不起作用，然后尝试导入 bootstrap css 项目中的文件 styles.scss 文件。

import 'node_modules/bootstrap/dist/css/bootstrap.min.css'

这应该有效。我希望这个方法可以解决你的问题:)

为什么我的 Angular 应用无法识别 bootstrap 样式？

why is my Angular app not recognizing bootstrap styles?

twitter-bootstrap

angular

scss-mixins