Upgrade npm dependencies.

Update SASS files to use new @use syntax since @include is deprecated.
Include Open Sans font by importing CSS file, instead of SCSS (since it uses deprecated @include syntax).

assets/font/open-sans/open-sans.css

@@ -0,0 +1,80 @@
+/* BEGIN Light */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/Light/OpenSans-Light.woff2?v=1.1.0") format("woff2"), url("./fonts/Light/OpenSans-Light.woff?v=1.1.0") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+/* END Light */
+/* BEGIN Light Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+/* END Light Italic */
+/* BEGIN Regular */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/Regular/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("./fonts/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff");
+  font-weight: normal;
+  font-style: normal;
+}
+/* END Regular */
+/* BEGIN Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/Italic/OpenSans-Italic.woff2?v=1.1.0") format("woff2"), url("./fonts/Italic/OpenSans-Italic.woff?v=1.1.0") format("woff");
+  font-weight: normal;
+  font-style: italic;
+}
+/* END Italic */
+/* BEGIN Semibold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/Semibold/OpenSans-Semibold.woff2?v=1.1.0") format("woff2"), url("./fonts/Semibold/OpenSans-Semibold.woff?v=1.1.0") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+/* END Semibold */
+/* BEGIN Semibold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/SemiboldItalic/OpenSans-SemiboldItalic.woff?v=1.1.0") format("woff");
+  font-weight: 600;
+  font-style: italic;
+}
+/* END Semibold Italic */
+/* BEGIN Bold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/Bold/OpenSans-Bold.woff2?v=1.1.0") format("woff2"), url("./fonts/Bold/OpenSans-Bold.woff?v=1.1.0") format("woff");
+  font-weight: bold;
+  font-style: normal;
+}
+/* END Bold */
+/* BEGIN Bold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/BoldItalic/OpenSans-BoldItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/BoldItalic/OpenSans-BoldItalic.woff?v=1.1.0") format("woff");
+  font-weight: bold;
+  font-style: italic;
+}
+/* END Bold Italic */
+/* BEGIN Extrabold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/ExtraBold/OpenSans-ExtraBold.woff2?v=1.1.0") format("woff2"), url("./fonts/ExtraBold/OpenSans-ExtraBold.woff?v=1.1.0") format("woff");
+  font-weight: 800;
+  font-style: normal;
+}
+/* END Extrabold */
+/* BEGIN Extrabold Italic */
+@font-face {
+  font-family: 'Open Sans';
+  src: url("./fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/ExtraBoldItalic/OpenSans-ExtraBoldItalic.woff?v=1.1.0") format("woff");
+  font-weight: 800;
+  font-style: italic;
+}
+/* END Extrabold Italic */

src/css/application.sass

@@ -1,4 +1,4 @@
-@import "reset"
+@use "reset"
-@import "font"
+@use "font"
-@import "base"
+@use "base"
-@import "autocomplete"
+@use "autocomplete"

src/css/autocomplete.sass

@@ -1,4 +1,4 @@
-@import "./src/css/include.sass"
+@use "./src/css/include.sass" as *
 
 
 .p-component

src/css/base.sass

@@ -1,3 +1,5 @@
+@use "include" as *
+
 :root[theme='light']
     --status-bar-background: #48b57e
     --status-bar-color: #fff

src/css/font.sass

@@ -4,7 +4,6 @@
   font-weight: 400
   font-style: normal
 
-
 @font-face
   font-family: 'Hack'
   src: url('@/assets/font/hack/hack-bold.woff2') format('woff2'), url('@/assets/font/hack/hack-bold.woff') format('woff')
@@ -23,5 +22,3 @@
   font-weight: 700
   font-style: italic
 
-
-@import "@/assets/font/open-sans/open-sans"

src/main.js

@@ -1,4 +1,5 @@
 import './css/application.sass'
+import '../assets/font/open-sans/open-sans.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

vite.config.mjs

@@ -137,7 +137,7 @@ export default defineConfig({
 		preprocessorOptions: {
 			sass: {
 				additionalData: `
-    @import "./src/css/include.sass"
+    @use "./src/css/include.sass" as *
 `
 			}
 		}

webapp/vite.config.js

@@ -38,7 +38,7 @@ export default defineConfig({
         preprocessorOptions: {
             sass: {
                 additionalData: `
-    @import "../src/css/include.sass"
+    @use "../src/css/include.sass" as *
     `
             },
         },