Bootstrap样式不适用于我的angular 2项目

Question

我在angular-cli.json - 样式中添加了bootstrap css.不将引导程序样式应用于我的项目.我在package.json中添加并执行了npm install.怎么解决这个？

角cli.json

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

的package.json

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

Answer 1

1. 无需更新或重新安装您的bootstrap,只需执行下面提到的步骤即可

2. 在styles数组中打开angular-cli.json并指定bootstrap的路径,如下所示:

   角cli.json:

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

3. 打开你的style.css并将其粘贴在顶部:

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

Answer 2

在你的 style.css 顶部添加以下代码行并让我们知道。

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

也请检查以下行

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

希望它会有所帮助。

Answer 3

angular.json 文件中有两种样式声明。一个在 Builder 部分，另一个在 test 的 builder 部分。确保你把它放在正确的部分。

"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",
        ],
 .....
}

Answer 4

将以下代码行粘贴到 .angular-cli.json 中的 styles 下：[]

“../node_modules/bootstrap/dist/css/bootstrap.css”