引导样式不适用于我的 Angular 2 项目答案

【问题标题】：Bootstrap styles not applying to my angular 2 project引导样式不适用于我的 Angular 2 项目
【发布时间】：2018-06-02 20:52:58
【问题描述】：

我在 angular-cli.json - 样式中添加了引导 css。没有将引导样式应用于我的项目。我在 package.json 中添加并安装了 npm。如何解决？

angular-cli.json

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

package.json

 "dependencies": {
    "bootstrap": "^4.0.0-beta.2"
 }

【问题讨论】：

ng cli + bootstrap: how to add bootstrap?的可能重复

标签： angular bootstrap-4

【解决方案1】：

无需更新或重新安装引导程序，只需执行以下提到的步骤，它就会为您工作
在样式数组中打开 angular-cli.json 并指定引导路径，如下所示：

Angular-cli.json：
```
"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
],
```

打开您的 style.css 并将其粘贴到顶部：

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")

【讨论】：

如果有人使用 angular 2+，那么您将看到 angular.json 而不是 angular-cli.json。添加上述样式并“运行 npm install bootstrap --save”。我没有在styles.css 中导入任何@import URL，但它仍然对我有用。不要忘记“重新运行 ng serve”
这个答案解决了用"./node_modules/bootstrap/dist/css/bootstrap.min.css" 替换"../node_modules/bootstrap/dist/css/bootstrap.min.css"（这是Angular 5 之前的正确语法）的问题，相当于"node_modules/bootstrap/dist/css/bootstrap.min.css"（这是从Angular 6 开始的推荐语法） . 但是问题可能是你在错误的"styles": [ .. ]数组中写了这样一行，因为@中有两个这样的数组987654328@，正如@Goel 指出的here below
谢谢，我错过了 angular.json 中的数据。我想如果我运行“npm install bootstrap”，它就会解决这个问题

【解决方案2】：

在您的 style.css 顶部添加以下代码行并告诉我们。

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")

也请检查以下行

@import url("./node_modules/bootstrap/dist/css/bootstrap.min.css")

希望它会有所帮助。

【讨论】：

已添加。保持不变。
在stackblitz.com 上创建一个演示项目并提供链接以便我可以提供适当的帮助。

【解决方案3】：

angular.json 文件中有两种样式声明。一个在构建器部分，另一个在测试的构建器部分。确保将其放在正确的部分。

"builder" : {
 .....
     "styles" : [                  // It should go here. Around line no. 27
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
 .....
},
"test": {              
 .....
     "styles" : [                  // Not here!
          "src/styles.css",
        ],
 .....
}

【讨论】：

我正在做这个答案指出的错误，谢谢！请注意，保存文件后 angular.json 中的更改不会像 .ts 或 .html 文件中的更改那样自动计入帐户。编辑angular.json 后，如果ng serve 正在运行，则必须通过Ctrl+C 将其停止，然后再次运行ng serve。

【解决方案4】：

我遇到了同样的问题。我试图找出问题所在，但没有得到任何结果。我使用

安装了引导程序

npm install --save bootstrap

它安装了最新的引导程序，即版本 4，所以我从 node_modules 文件夹中删除了已安装的引导程序，并将 packageg.json 文件中的依赖项更新为早期版本

"bootstrap" : "^3.3.7"

跑了

npm intstall

在角样式数组中指定引导文件的路径为

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

效果很好。

【讨论】：

【解决方案5】：

一步一步：

在你的应用目录内的终端中运行：
```
npm install --save bootstrap 
```
打开angular.json 并搜索styles。在数组的开头粘贴您的bootstrap.min.css 文件的路径

应该是这样的：
```
"styles": [
          "../node_modules/bootstrap/dist/css/bootstrap.min.css",
          "styles.css"
        ],
```

打开您的style.css 并将其粘贴到顶部：

@import url("../node_modules/bootstrap/dist/css/bootstrap.min.css")

重启服务器

【讨论】：

【解决方案6】：

在样式下的.angular-cli.json中粘贴以下代码行：[]

"../node_modules/bootstrap/dist/css/bootstrap.css"

【讨论】：

我已经添加了这一行。仍然没有反映引导样式
你可以在这里粘贴你的 cli 代码和 package.json 代码吗？

【解决方案7】：

在 angular-cli.json 中

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

【讨论】：

我已经添加了这一行。仍然没有反映引导样式
在 style.css 可能有帮助之前使用引导链接