Bootstrap 5 Style not working properly with Angular 16

Question

The problem is in my angular.json i declared my styles like this.

"styles": [ { "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", "bundleName": "ltrCSS" }, { "input": "node_modules/bootstrap/dist/css/bootstrap.rtl.min.css", "bundleName": "rtlCSS" }, "src/[FOLDER]/styles.css", "src/[FOLDER]/rtlcustomstyle.css" ],

and when im building my site for prod it produces two extra styles but when im building it locally it does not have any error. Local Build Local Prod Build Prod

I have tried to mix and match codes and ranking of the styles but it still not works. As you can see below the css file it has a additional <style>...</style> the content of it is what exactly inside the bootstrap.min.css

Answer 1

I use bootstrap 5 in latest Angular version. There is my steps: 1(Terminal). ng add @ng-bootstrap/ng-bootstrap 2(angular.json => add to first style element). "node_modules/bootstrap/dist/css/bootstrap.min.css", 3(restart terminal by typin ctrl + c then ng serve).