Merge pull request #526 from GovTechSG/fix/sass-loader-deprecation-wa…

…rnings

fix(*): test with sass version 14.2.1 and fix deprecation

lib/sgds/package.json

@@ -25,7 +25,7 @@
     "css-minimizer-webpack-plugin": "^3.4.1",
     "mini-css-extract-plugin": "^2.6.0",
     "sass": "~1.49.9",
-    "sass-loader": "^12.6.0",
+    "sass-loader": "^14.2.1",
     "webpack": "^5.70.0",
     "webpack-cli": "^5.1.4"
   },

lib/sgds/sass/_variables.scss

@@ -552,7 +552,7 @@ $grid-row-columns: 6 !default;
 $gutters: $spacers !default;
 
 // Container padding
-$container-padding-x: $grid-gutter-width / .5 !default;
+$container-padding-x: calc($grid-gutter-width / .5) !default;
 
 
 // Components

portal/assets/custom-css/components/_sidenav-collapsible.scss

@@ -8,7 +8,7 @@ $paragraph-font-size: 1rem;
   left: 0;
   height: 100%;
   width: 300px;
-  background: hsl(0,0,90%);
+  background: hsl(0,0%,90%);
   z-index: 100;
   transition: all 0.3s ease;
   &.close{
@@ -172,7 +172,7 @@ $paragraph-font-size: 1rem;
   opacity: 0;
 
   &::before{
-    background-color: hsl(207,100,42);
+    background-color: hsl(207,100%,42%);
     border-radius: 9999px;
     font-weight: bold;
     padding: 1px;

portal/package.json

@@ -13,12 +13,13 @@
   "author": "Tey Liang Tai",
   "license": "MIT",
   "dependencies": {
-    "bootstrap": "^5.1.3",
-    "@govtechsg/sgds": "file:../lib/sgds"
+    "@govtechsg/sgds": "file:../lib/sgds",
+    "bootstrap": "^5.1.3"
   },
   "devDependencies": {
     "concurrently": "^7.0.0",
     "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.1",
     "image-minimizer-webpack-plugin": "^3.8.3",
     "imagemin": "^8.0.1",
     "imagemin-gifsicle": "^7.0.0",
@@ -27,10 +28,9 @@
     "imagemin-svgo": "^10.0.1",
     "lodash": "^4.17.21",
     "mini-css-extract-plugin": "^2.8.1",
+    "sass": "~1.49.9",
+    "sass-loader": "^14.2.1",
     "webpack": "^5.70.0",
-    "webpack-cli": "^5.1.4",
-    "css-loader": "^6.7.1",
-    "sass-loader": "^12.6.0",
-    "sass": "~1.49.9"
+    "webpack-cli": "^5.1.4"
   }
 }