Replace node-sass with sass and update bootstrap to version 5.3

.changes/unreleased/DX-20250528-165813.yaml

@@ -0,0 +1,6 @@
+kind: DX
+body: Replace library node-sass by sass, and upgrade bootstrap to version 5.3 (yarn upgrade / install is required)
+time: 2025-05-28T16:58:13.226870341+02:00
+custom:
+    Issue: ""
+    SchemaChange: No schema change

package.json

@@ -18,7 +18,7 @@
     "@types/eslint__js": "^8.42.3",
     "@typescript-eslint/parser": "^8.12.2",
     "bindings": "^1.5.0",
-    "bootstrap": "5.2.3",
+    "bootstrap": "^5.3.6",
     "chokidar": "^3.5.1",
     "ckeditor5": "^45.1.0",
     "dompurify": "^3.1.0",
@@ -29,11 +29,11 @@
     "fork-awesome": "^1.1.7",
     "intl-messageformat": "^10.5.11",
     "jquery": "^3.6.0",
-    "node-sass": "^8.0.0",
     "popper.js": "^1.16.1",
     "postcss-loader": "^7.0.2",
     "prettier": "^3.3.3",
     "raw-loader": "^4.0.2",
+    "sass": "^1.89.0",
     "sass-loader": "^14.0.0",
     "select2": "^4.0.13",
     "select2-bootstrap-theme": "0.1.0-beta.10",

src/Bundle/ChillCalendarBundle/Resources/public/vuejs/MyCalendarRange/App2.vue

@@ -97,7 +97,7 @@
     </div>
     <FullCalendar :options="calendarOptions" ref="calendarRef">
         <template v-slot:eventContent="{ event }">
-            <span :class="eventClasses(event)">
+            <span :class="eventClasses">
                 <b v-if="event.extendedProps.is === 'remote'">{{
                     event.title
                 }}</b>
@@ -349,11 +349,8 @@ const pickedLocation = computed<Location | null>({
 
 /**
  * return the show classes for the event
- * @param arg
  */
-const eventClasses = function (): object {
-    return { calendarRangeItems: true };
-};
+const eventClasses = { calendarRangeItems: true };
 
 /*
 // currently, all events are stored into calendarRanges, due to reactivity bug

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss

@@ -11,15 +11,14 @@
 
 // 3. Include remainder of required Bootstrap stylesheets
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
 
 // 4. Include any default map overrides here
 @import "custom/_maps";
-@import "bootstrap/scss/maps";
 
 // 5. Include remainder of required parts
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/root";
-
-
+@import "bootstrap/scss/utilities";
 

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/bootstrap.scss

@@ -1,8 +1,8 @@
 // Some Bootstrap variables and configuration files are shared with chill entrypoint
 @import "shared";
 
-// 6. Optionally include any other parts as needed
-@import "bootstrap/scss/utilities";
+// 6. Include any other optional stylesheet partials as desired; list below is not inclusive of all available stylesheets
+@import "bootstrap/scss/root";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -32,10 +32,12 @@
 @import "bootstrap/scss/carousel";
 @import "bootstrap/scss/spinners";
 @import "bootstrap/scss/offcanvas";
-@import "bootstrap/scss/helpers";
+@import "bootstrap/scss/placeholders";
 
 // 7. Optionally include utilities API last to generate classes based on the Sass map in
 @import "bootstrap/scss/utilities/api";
+// Helpers
+@import "bootstrap/scss/helpers";
 
 // 8. Add additional custom code here
 @import "custom";

webpack.config.js

@@ -74,7 +74,12 @@ module.exports = (async () => {
   // basic encore configuration
   Encore.setOutputPath("public/build/")
     .setPublicPath("/build")
-    .enableSassLoader()
+    .enableSassLoader(function (options) {
+      // If set to true, Sass won’t print warnings that are caused by dependencies (like bootstrap):
+      // https://sass-lang.com/documentation/js-api/interfaces/options/#quietDeps
+        options.sassOptions.quietDeps = true;
+        options.sassOptions.silenceDeprecations = ['import'];
+    })
     .enableVueLoader(() => {}, {
       version: 3,
     })