Bootstrap 为什么我的Angular应用程序无法识别引导样式?

gfttwv5a  于 2022-12-07  发布在  Bootstrap
关注(0)|答案(5)|浏览(166)

我运行了“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"
        ]
xxhby3vn

xxhby3vn1#

在Angular.Json中添加 Bootstrap 文件后,您需要重新运行项目。之后,只有更改才会应用到项目中。如果仍然不起作用,请尝试在项目styles.scss文件中导入 Bootstrap css文件。

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

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

os8fio9y

os8fio9y2#

我已经生成了一个新的应用程序,其方式与您描述的相同,使用:

  • ng new '应用程序名称'
  • 选定路由
  • 选定的scss

然后使用npm install bootstrap --savenpm 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文件在同一目录中吗?

smtd7mpg

smtd7mpg3#

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

r1zhe5dt

r1zhe5dt4#

在Angular中使用引导时,您可能希望使用 Package 器库,如ngx-bootstrap或ng-bootstrap。
创建这些 Package 器库的目的是为了使您无需使用jquery来执行某些操作,例如打开模态、触发警报等。
不建议在Angular中使用jquery,这可能会影响性能,如果您想了解更多信息,可以搜索这个。
ngx-bootstrap的安装说明可在www.example.com上找到,ng-bootstrap的安装说明可在www.example.com上找到https://valor-software.com/ngx-bootstrap/#/documentation#getting-startedhttps://ng-bootstrap.github.io/#/getting-started
为了决定两个库中的哪一个,之前有人在stackoverflow上发过一个问题:What is the difference between "ng-bootstrap" and "ngx-bootstrap"?
希望这对你有帮助!

li9yvcax

li9yvcax5#

我也遇到了同样的错误。我注意到angular.json文件有两个样式标记。
我认为一个是用于项目,另一个是用于测试。
尝试在angular.json中搜索样式,您也会找到两个。
我把他们两个都这样说:

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

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

这就是问题的解决方式)

相关问题