无法在 Angular 6 中添加 Bootstrap 4

Question

当我尝试使用

添加最新的 bootstrap 版本时遇到问题

npm install bootstrap

之后，当我尝试运行时收到错误消息。

ng serve --open

我在angular.json

中添加Bootstrap

像这样

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

错误信息是

    ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve '...\node_modules\bootstrap\dist\css\bootstrap.min.css' in '...'

为什么我会收到错误消息？

Answer 1

删除 Angular.json 中的 "../node_modules/bootstrap/dist/css/bootstrap.min.css",。

尝试将此 @import "~bootstrap/dist/css/bootstrap.css"; 添加到您的 style.css 文件中。

参考：Styling Angular CLI v6 apps with Bootstrap

Answer 2

在新版本angular中，使用node_modules/bootstrap/dist/css/bootstrap.min.css代替../node_modules/bootstrap/dist/css/bootstrap.min.css

所以在 angular.json 中文件样式属性看起来像

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

注意： 如果 ng serve 已经运行ning 那么你可能需要停止并且运行进行上述更改后再次使用它。编码愉快:)

Answer 3

在Angular6中你可以添加bootstrap到两个文件：

里面angular.json:

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

里面angular.json:

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

里面styles.css:

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.css";

Note: If you use the first or second way, it's needed to cancel the running application, that means, if ng serve is active you must exit the app with Ctrl + C, but in the third way, it's not needed to cancel the application.

Answer 4

如果项目有像 Karma 这样的测试运行器，Angular.json 文件有两种样式属性:

1- 项目 -> 项目名称 -> 架构师 -> 构建 -> 选项

2- 项目 -> 项目名称 -> 架构师 -> 测试 -> 选项

也许你只是在测试部分更改了样式，而构建部分有旧样式。

Answer 5

在angular中，我们要加上我们安装的bootstrap的方向
这意味着在 angular.

中使用 bootstrap 的步骤如下

1. npm install bootstrap

那么我们要在angular.json中添加路径如下

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

无法在 Angular 6 中添加 Bootstrap 4

Can´t add Bootstrap 4 in Angular 6

javascript

css

twitter-bootstrap

angular

angular6