diff --git a/package.json b/package.json
index aa1c7deb0adb6e6aea5a1380426189ac24eee7a7..d2010bc501d9edd6ce5cad3b4a380d29c07153d7 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,9 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
+    "sass": "^1.62.1",
+    "sass-loader": "^13.3.0",
+    "typescript": "^5.0.4",
     "vite": "^3.0.1"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..eeb13738c5f0f4b51f0fba12c8ffb003ae17470a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue';
+import TheWelcome from './components/TheWelcome.vue';
 </script>
 
 <template>
@@ -17,9 +17,10 @@ import TheWelcome from './components/TheWelcome.vue'
   </main>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 header {
   line-height: 1.5;
+  background-color: $primary-color;
 }
 
 .logo {
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 1b8faac1521345513353e96050dd24d94610d432..ff8decf47404142bc487f1700b82929ee97c0faa 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script lang="ts" setup>
 defineProps({
   msg: {
     type: String,
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
index d3d2e7acc8a9deeb26e48169ee3cbc64d2b54f2f..ce040fe37cf8b7228eac32f7f3e6779c1a402186 100644
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0b777eda994fa5127c7c51d81a1bbae90611a016
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1 @@
+$primary-color:red;
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000000000000000000000000000000000000..f98eb1264e06a9b726e92bc30666642e25d0167c
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es6",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "sourceMap": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/vite.config.js b/vite.config.js
index 4ad898dec614e030adad5e4f80523145bce56245..7b96bfed94c2a50426eee2999de379790046f07b 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -6,5 +6,13 @@ export default defineConfig({
   server: {
     host: true
   },
-  plugins: [vue()]
+  plugins: [vue()],
+  css:{
+    preprocessorOptions:{
+      scss:{
+        // 在此处添加全局变量
+        additionalData: `@import "./src/styles/variables.scss";`
+      }
+    }
+  }
 })