Wed May 24 04:10:00 UTC 2023 inscode

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"
   }
 }

src/App.vue

-<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 {

src/components/HelloWorld.vue

-<script setup>
+<script lang="ts" setup>
 defineProps({
   msg: {
     type: String,

src/components/TheWelcome.vue

-<script setup>
+<script setup lang="ts">
 import WelcomeItem from './WelcomeItem.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'

src/styles/variables.scss

+$primary-color:red;
\ No newline at end of file

tsconfig.json

+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "es6",
+    "strict": true,
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "sourceMap": true
+  },
+  "exclude": [
+    "node_modules"
+  ]
+}

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";`
+      }
+    }
+  }
 })