Bootstrap styles not applying to my angular 2 proj

问题:

I added bootstrap css in angular-cli.json - styles. Not applying bootstrap styles to my project. I added in package.json and did npm install. How to resolve this?

angular-cli.json

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

package.json

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

回答1:

1. No need to update or reinstall your bootstrap just do below mentioned step it will work for you

2. open angular-cli.json inside styles array and specifying the path of bootstrap like this:

   Angular-cli.json:

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

3. Open your style.css and paste this at the top:

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

回答2:

In your style.css add following line of code on top and let us know.

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

Also check with following line too

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

Hope it will help.

回答3:

There is two styles declaration in angular.json file. One in Builder section and other one test's builder section. Make sure you are putting it in the right section.

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

回答4:

I faced the same problem. I tried to find what was the problem but got no result. I installed bootstrap using

npm install --save bootstrap

which installed the latest bootstrap i.e. ver 4, so I deleted installed bootstrap from node_modules folder and updated dependency in packag.json file to earlier version

"bootstrap" : "^3.3.7"     

and ran

npm intstall

After specifying the path of bootstrap file in angular style array as

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

it worked fine.

回答5:

paste following line of code in .angular-cli.json under styles: []

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

回答6:

Step by step:

1. In terminal inside your app directory run:

   npm install --save bootstrap 
   

2. Open angular.json and search for styles. At the beginning of the array paste the path to your bootstrap.min.css file

   Should look like this:

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

3. Open your style.css and paste this at the top:

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

4. Restart your server

回答7:

inside angular-cli.json in

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