无法在Angular 6中添加Bootstrap 4

chhqkbe1  于 2023-08-01  发布在  Bootstrap
关注(0)|答案(6)|浏览(105)

当我尝试添加最新的 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 '...'


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

cu6pst1q

cu6pst1q1#

使用Angular 16,我必须安装bootstrap和jQuery(rpm install jQuery --保存)。然后我在angular.json中添加了以下信息:

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

字符串

anhgbhbe

anhgbhbe2#

删除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

2w3rbyxf

2w3rbyxf3#

如果项目有像Karma这样的测试运行器,Angular.json文件有两个样式属性:
1-projects -> projectName -> architect -> build -> options
2-projects -> projectName -> architect -> test -> options
x1c 0d1x的数据
也许你只是在测试部分改变了样式,而构建部分有旧的样式。

0s7z1bwu

0s7z1bwu4#

Angular 6中,您可以将bootstrap添加到两个文件中:
1.在angular.json内部:

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

字符串
1.在angular.json内部:

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


1.在styles.css中:

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

注意:如果使用第一种或第二种方式,则需要取消正在运行的应用程序,也就是说,如果ng serve处于活动状态,则需要使用Ctrl + C退出应用程序,而第三种方式则不需要取消应用程序。

wlwcrazw

wlwcrazw5#

在新版本的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已经在运行,那么您可能需要在完成上述更改后停止并重新运行它。Happy coding:)

3wabscal

3wabscal6#

在Angular 上,我们必须加上我们安装的引导装置的方向.
这意味着在Angular 中使用bootstrap的步骤如下。

1. npm install bootstrap

字符串
然后,我们必须在angular.json中添加路径,如下所示

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

相关问题