GDB-14684 install and configure bootstrap

packages/workbench/angular.json

@@ -38,7 +38,10 @@
             "customWebpackConfig": {
               "path": "extra-webpack.config.js",
               "libraryName": "workbench",
-              "libraryTarget": "module"
+              "libraryTarget": "module",
+              "mergeStrategies": {
+                "module.rules": "replace"
+              }
             }
           },
           "configurations": {

packages/workbench/extra-webpack.config.js

@@ -1,13 +1,28 @@
+const {resolve} = require('node:path');
 const singleSpaAngularWebpack = require('single-spa-angular/lib/webpack').default;
 
+function patchSassLoader(rules) {
+  if (!Array.isArray(rules)) return;
+  rules.forEach(rule => {
+    patchSassLoader(rule.rules);
+    patchSassLoader(rule.oneOf);
+    (rule.use || []).forEach(use => {
+      if (typeof use === 'object' && use.loader && use.loader.includes('sass-loader')) {
+        use.options = {
+          ...use.options,
+          sassOptions: {
+            silenceDeprecations: ['color-functions', 'global-builtin', 'import', 'if-function'],
+            loadPaths: [resolve(__dirname)]
+          }
+        };
+      }
+    });
+  });
+}
+
 module.exports = (config, options) => {
   const singleSpaWebpackConfig = singleSpaAngularWebpack(config, options);
 
-  // Ensure Zone.js is included
-  // singleSpaWebpackConfig.externals = singleSpaWebpackConfig.externals || {};
-  // delete singleSpaWebpackConfig.externals['zone.js'];
-  // Feel free to modify this webpack config however you'd like to
-
   singleSpaWebpackConfig.externals = [...singleSpaWebpackConfig.externals, "@ontotext/workbench-api"];
   singleSpaWebpackConfig.experiments.outputModule = true;
   if (singleSpaWebpackConfig.output) {
@@ -30,6 +45,7 @@ module.exports = (config, options) => {
   // singleSpaWebpackConfig.devServer.client.overlay = false;
   // singleSpaWebpackConfig.devServer.liveReload = false;
 
-  // console.log('=============', JSON.stringify(singleSpaWebpackConfig, null, 2));
+  patchSassLoader(singleSpaWebpackConfig.module.rules);
+
   return singleSpaWebpackConfig;
 };

packages/workbench/package.json

@@ -27,6 +27,7 @@
     "@jsverse/transloco": "^8.3.0",
     "@jsverse/transloco-messageformat": "^8.3.0",
     "@primeuix/themes": "^2.0.3",
+    "bootstrap": "^5.3.8",
     "file-saver": "^2.0.5",
     "ontotext-yasgui-web-component": "^1.6.4",
     "primeng": "^21.1.8",

packages/workbench/src/styles.scss

@@ -1,2 +1,21 @@
 /* You can add global styles to this file, and also import other style files */
 @use "styles/primeng-overrides";
+
+app-root {
+  @import "../node_modules/bootstrap/scss/functions";
+  // Required Bootstrap imports
+  @import "../node_modules/bootstrap/scss/variables";
+  @import "../node_modules/bootstrap/scss/variables-dark";
+  @import "../node_modules/bootstrap/scss/maps";
+  @import "../node_modules/bootstrap/scss/mixins";
+  // Probably not needed and leaking properties to :root
+  //@import "../node_modules/bootstrap/scss/root";
+  // Optional components
+  @import "../node_modules/bootstrap/scss/utilities";
+  // Probably not needed as well
+  //@import "../node_modules/bootstrap/scss/reboot";
+  @import "../node_modules/bootstrap/scss/containers";
+  @import "../node_modules/bootstrap/scss/grid";
+  @import "../node_modules/bootstrap/scss/helpers";
+  @import "../node_modules/bootstrap/scss/utilities/api";
+}