I'm trying to setup Bootstrap 5 in my Angular 14 project which is using SCSS instead of CSS. I have installed bootstrap via npm (npm install bootstrap --save
) and it's now correctly referenced in my package.json file:
"dependencies": {
"@angular/animations": "^14.2.2",
"@angular/cdk": "^14.2.2",
"@angular/common": "^14.2.2",
"@angular/compiler": "^14.2.2",
"@angular/core": "^14.2.2",
"@angular/forms": "^14.2.2",
"@angular/material": "^14.2.2",
"@angular/platform-browser": "^14.2.2",
"@angular/platform-browser-dynamic": "^14.2.2",
"@angular/router": "^14.2.2",
"@popperjs/core": "^2.11.6",
"bootstrap": "^5.2.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
I've added the boostrap.scss file reference in my angular.json file:
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/file-sharing-app.ui",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"src/custom-theme.scss",
"node_modules/bootstrap/scss/bootstrap.scss"
],
"scripts": []
},
But the below class is having no effect:
<span >File Sharing App</span>
None of the other bootstrap classes I've used have worked either. I have tried restarting the application (re running ng serve
). Does anybody know what I am missing?
CodePudding user response:
If you are using SCSS, don't add it to your angular.json config. Instead, add this to your styles.scss directly:
@import "~bootstrap/scss/bootstrap";
CodePudding user response:
Have you tried rerunning your applications?
If you already tried that, then you can try installing jquery
npm install jquery --save
and adding
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]