Question

我运行“ ng new”来创建一个新的应用程序，然后选择了SCSS作为样式选项。我没有加载仅.css格式的引导程序（我相信），并且应用程序无法识别任何引导程序样式。 Angular是否需要引导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

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

ng新的“应用名称”
选择的路线
选定的scss

然后使用npm install bootstrap --save和npm install font-awesome --save安装了引导程序。之后，我复制了

样式的内容

"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 2

在Angular.Json中添加了引导文件之后，您需要重新运行项目。之后，仅更改适用于项目。如果仍然不起作用，请尝试将引导css文件导入项目styles.scss文件中

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

这应该有效。我希望这种方法可以解决您的问题：）

Answer 3

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

Answer 4

在Angular中使用引导程序时，您可能希望使用包装器库，例如ngx-bootstrap或ng-bootstrap。

这些包装器库是经过制作的，因此您无需使用jquery来执行某些操作，例如打开模式，触发警报等。

不鼓励在Angular中使用jquery，并且可能会影响性能，如果您希望了解更多信息，可以进行搜索。

可以在https://valor-software.com/ngx-bootstrap/#/documentation#getting-started和ng-bootstrap https://ng-bootstrap.github.io/#/getting-started上找到ngx-bootstrap的安装说明

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

希望这对您有帮助！

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

4 个答案: