Actually, I needed to add/include Bootstrap 5 in my project referring this post. And worked.
But whenever I am running "mvn clean install -PautoInstallBundle" in ui.frontend after creating .scss for my component, my clientlibs in /apps get reset & bootstrap support is gone. So, then again I've to add bootstrap files in clientlib.
I am still learning, so I know I'm doing something wrong here. Thus, please tell me how to add bootstrap in my project.
Solved! Go to Solution.
Whenever you will build ui.frontend, it will overwrite the clientlib-site and clientlib-dependency. If you are adding bootstrap as a separate library then you can update clientlib-dependency with category of bootstrap 5 clientlibs.
You can refer code of ui.frontend/clientlibs.config.js, it is creating clientlibs inside ui.apps. Refer sample code for addition of bootstrap5
name: 'clientlib-dependencies', categories: ['project.dependencies'], dependencies: ['bootstrap5'],
Add bootstap5 JS and CSS file in separate clientlibs in ui.apps/project/clientlibs/bootstrap5.
Also this command is to install bundle of project : mvn clean install -PautoInstallBundle
Refer this document for correct commands : https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-wknd-tutorial-devel...
Thanks for the reply.
I did as you said & bootstrap js & css were also added to clientlibs. But bootstrap isn't working. To add "dependencies: ['bootstrap']" don't we need to add categories = bootstrap5 to that folder?
Yes, you have to create a separate clientlibs with categories=bootrstap5(any other name you want to keep) as I mentioned above i.e. ui.apps/project/clientlibs/bootstrap5. You have to add this in your codebase to avoid getting removed after deployment.