Can´t add Bootstrap 4 in Angular 6

问题

I have the problem when I try to add the latest bootstrap version with

npm install bootstrap

After that, I got an error message when I tried to run it.

ng serve --open

I Add Bootstrap in angular.json

like this

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

And the error message is

    ERROR in multi ../node_modules/bootstrap/dist/css/bootstrap.min.css ./src/styles.css
Module not found: Error: Can't resolve '...\node_modules\bootstrap\dist\css\bootstrap.min.css' in '...'

Why did I get the error message?

回答1:

Delete "../node_modules/bootstrap/dist/css/bootstrap.min.css", in the Angular.json.

Try add this @import "~bootstrap/dist/css/bootstrap.css"; to your style.css file.

Ref: Styling Angular CLI v6 apps with Bootstrap

回答2:

In the new version of angular, use node_modules/bootstrap/dist/css/bootstrap.min.css instead of ../node_modules/bootstrap/dist/css/bootstrap.min.css

So in angular.json file style attribute will look like

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

NOTE: if ng serve is already running then you may need to stop and run it again after doing the above changes. Happy coding :)

回答3:

In the Angular 6 you can add bootstrap to two files:

Inside the angular.json:

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

Inside the angular.json:

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

Inside the styles.css:

/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.css";

Note: If you use the first or second way, it's needed to cancel the running application, that means, if ng serve is active you must exit the app with Ctrl + C, but in the third way, it's not needed to cancel the application.