add:sass

frontend/src/App.vue

@@ -21,7 +21,5 @@
   filter: drop-shadow(0 0 2em #42b883aa);
 }
 </style>
-<style lang="scss">
-  @use '@/styles/index.scss'
-</style>
+
 

frontend/vite.config.ts

@@ -7,6 +7,22 @@ export default defineConfig({
   // 插件配置，这里使用了Vue插件，以便支持Vue项目的构建
   plugins: [vue()],
 
+
+  /**
+   * 配置对象，用于定义 CSS 预处理器的选项。
+   * 通过此配置可以预导入公共样式文件，确保全局样式在所有 SCSS 文件中可用。
+   */
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `
+          @use '@/styles/color.scss' as *;
+          @use '@/styles/index.scss' as *;
+        ` // 可选：预导入公共样式
+      }
+    }
+  },
+
   // 解析配置，用于配置模块查找和解析行为
   resolve: {
     // 定义解析文件的扩展名，这允许导入这些文件时省略扩展名