Bootstrap在Angular 6应用程序中不起作用

Question

I want to make use of Bootstrap in an Angular 6 app and here is what I have done so far but nothing seems to be working out:

1) Installed bootstrap, jquery and popper.js using npm. 2) Entered the following in the Angular.json file

"styles": [
    "src/styles.scss",
    "node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": [
    "node_modules/jquery/dist/jquery.slim.min.js",
    "node_modules/popper.js/dist/umd/popper.min.js",
    "node_modules/bootstrap/dist/js/bootstrap.min.js"
    ...
]

Am I missing something. This doesn't seems to work out.

Answer 1

in your style.scss files use import

@import "node_modules/bootstrap/scss/bootstrap.scss"

and remove "node_modules/bootstrap/scss/bootstrap.scss" from angular.json file

Answer 2

First install bootstrap to the App:

npm install bootstrap@latest --save (flag is optional)

Then import the bootstrap to the index.html file in Angular:

@import '~bootstrap/css/bootstrap.css'; (~ means the node_Modules)

I hope this answers your question.