GDB-14684 install and configure bootstrap#2986
Conversation
There was a problem hiding this comment.
Pull request overview
Installs Bootstrap in the packages/workbench Angular app and wires selected Bootstrap SCSS partials into the app’s global stylesheet, with an attempt to scope the generated CSS under <app-root> so it doesn’t affect other microfrontends/apps.
Changes:
- Add
bootstrapas a dependency of the workbench package. - Import Bootstrap SCSS partials in
src/styles.scss(functions/variables/mixins + utilities/grid/helpers), scoped underapp-root. - Update
package-lock.jsonto reflect the new Bootstrap dependency (and its peer resolution).
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
packages/workbench/src/styles.scss |
Adds scoped Bootstrap SCSS imports under app-root to provide utility/grid/layout classes in the new workbench app. |
packages/workbench/package.json |
Adds Bootstrap as a dependency for the workbench app. |
packages/workbench/package-lock.json |
Locks Bootstrap and related dependency metadata. |
Files not reviewed (1)
- packages/workbench/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
@copilot resolve the merge conflicts in this pull request |
Done — I resolved the merge conflicts in this PR branch. The resolving commit is |
Primeng components that we use in the new workbench are styled by our styleguide, but outside of them, on a page level we usually need to apply some additional styles. To style the new workbench application consistently we need some utility css classes and helpers for easy creating layouts, grids, controlling spacing, etc. That's why we introduce the bootstrap library and scope it to work in the new angular app only. Configure sass-loader to silence deprecation warnings in webpack config Update webpack configuration to support Bootstrap 5.3.8 and enhance sass-loader options
svilenvelikov
force-pushed
the
GDB-14684-install-and-configure-boostrap
branch
from
483a8b6 to
0fa9c23
Compare
|
What
Install and configure bootstrap in the new workbench Angular app.
Why
Primeng components that we use in the new workbench are styled by our styleguide, but outside of them, on a page level we usually need to apply some additional styles. To style the new workbench application consistently we need some utility css classes and helpers for easy creating layouts, grids, controlling spacing, etc. That's why we introduce the bootstrap library and scope it to work in the new angular app only.
How
bootstrapdependency inpackages/workbench.packages/workbench/src/styles.scssunderapp-rootscope.masterupdates instyles.scssand kept both:@use "styles/primeng-overrides";Testing
masterand latest remote PR branch.packages/workbenchto validate the merged stylesheet changes.Screenshots
Checklist