Bump dependencies & migrate to latest sass

Vite config to prevent issues with HMR?
vuejs/core#13202 (comment)

Author: QuentiumYT

package-lock.json

@@ -72,26 +72,26 @@
     "test:update-snapshots": "playwright test --update-snapshots --reporter=line"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.2",
-    "@gouvfr/dsfr": "^1.14.3",
-    "@playwright/test": "^1.58.2",
-    "@storybook/web-components-vite": "^10.2.9",
-    "@types/node": "^25.2.3",
-    "@vitejs/plugin-vue": "^6.0.4",
+    "@eslint/js": "^10.0.1",
+    "@gouvfr/dsfr": "^1.14.4",
+    "@playwright/test": "^1.59.1",
+    "@storybook/web-components-vite": "^10.3.5",
+    "@types/node": "^25.6.0",
+    "@vitejs/plugin-vue": "^6.0.6",
     "chart.js": "^4.5.1",
     "chroma-js": "^3.2.0",
     "concurrently": "^9.2.1",
     "d3-scale": "^4.0.2",
-    "eslint": "^9.39.2",
-    "eslint-plugin-storybook": "^10.2.9",
+    "eslint": "^10.2.0",
+    "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-vue": "^10.8.0",
-    "globals": "^17.3.0",
+    "globals": "^17.5.0",
     "@jpinsonneau/html-to-image": "1.11.13",
     "lit": "^3.3.2",
-    "sass": "1.79.6",
+    "sass": "^1.99.0",
     "standard": "^17.1.2",
-    "storybook": "^10.2.9",
-    "vite": "^7.3.1",
-    "vue": "^3.5.28"
+    "storybook": "^10.3.5",
+    "vite": "^8.0.8",
+    "vue": "3.5.29"
   }
 }

package.json

@@ -591,5 +591,5 @@ const screenshotChart = () => {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/DataBox.scss';
+@use '@/styles/DataBox.scss';
 </style>

src/components/DataBox.vue

@@ -168,5 +168,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/GaugeChart.scss';
+@use '@/styles/GaugeChart.scss';
 </style>

src/components/GaugeChart.vue

@@ -617,5 +617,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/MapChart.scss';
+@use '@/styles/MapChart.scss';
 </style>

src/components/MapChart.vue

@@ -461,5 +461,5 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/MapChart.scss';
+@use '@/styles/MapChart.scss';
 </style>

src/components/MapChartReg.vue

@@ -74,5 +74,5 @@ const gradient = computed(() => `linear-gradient(90deg,${props.data.colorMin} 0%
 </script>
 
 <style scoped lang="scss">
-@import '@/styles/MapInfo.scss';
+@use '@/styles/MapInfo.scss';
 </style>

src/components/MapInfo.vue

@@ -38,6 +38,8 @@
         text-overflow: ellipsis;
         white-space: normal;
         display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
         line-clamp: 2;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;

src/styles/MapChart.scss

@@ -22,6 +22,8 @@
     text-overflow: ellipsis;
     white-space: normal;
     display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
     line-clamp: 2;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;

src/styles/Tooltip.scss

@@ -1,5 +1,5 @@
-@import 'Tooltip';
-@import 'Legend';
+@use 'Tooltip';
+@use 'Legend';
 
 .chart canvas {
   max-width: 100%;