fix: update sass and options

package.json

@@ -71,8 +71,8 @@
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.12.2",
     "less-loader": "^7.1.0",
-    "sass": "^1.23.7",
+    "sass": "^1.35.2",
-    "sass-loader": "^8.0.0",
+    "sass-loader": "^10.1.1",
     "svg-sprite-loader": "^4.1.6",
     "text-loader": "^0.0.1",
     "vue-cli-plugin-i18n": "^1.0.1",

src/components/d2-container/components/d2-source.vue

@@ -46,12 +46,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use 'sass:math';
+
 .d2-source {
   $borderRadius: 4px;
   $paddingLR: 15px;
   $paddingTB: 7px;
   $fontSize: 12px;
-  $rightOuter: $paddingLR / 2;
+  $rightOuter: math.div($paddingLR, 2);
   opacity: 0;
   position: fixed;
   z-index: 9999;

vue.config.js

@@ -85,7 +85,7 @@ module.exports = {
   css: {
     loaderOptions: {
       sass: {
-        prependData: '@import \'~@/assets/style/public.scss\';'
+        additionalData: '@use "@/assets/style/public.scss" as *;'
       },
       less: {
         lessOptions: {