Vue3设置别名和scss设置全局变量

1️⃣: 在tsconfig.json中配置

 compilerOptions:{
     "baseUrl":'./',
     "paths":{
         "@/*":["src/*"]
     }
 }

2️⃣：在vite.config.ts中配置

 import {resolve} from 'path'
 resolve:{
     alias:{
         "@":resolve(__dirname,'./src')
     }
 }

scss变量：

在vite.config.ts中配置：

 css:{
     preprocessorOptions:{
       scss:{
         additionalData:`@import '/src/assets/variables.scss';` 
       }
     }
   }

注意：要加分号

在组件中使用：
 

<template>
    <div class="div">
        <h1>Vue3</h1>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped lang="scss">
.div{
    h1{
        color:$theme
    }
}
</style>

设置打包顺序：

更改打包顺序：

1️⃣：在vite.config.ts中配置

{
    build:{
        outDir:'打包输出文件'
    }
}