配置vue3代码片段及启用scss

一，配置代码片段
1，打开VScode->左下角齿轮->点击配置用户代码片段->新建代码全局文件->输入vue3
2，按照如下配置导入您的vscode

{
  "Vue 3 Template": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div>",
      "    $1",
      "  </div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "  $2",
      "</script>",
      "",
      "<style scoped lang=\"scss\">",
      "  $3",
      "</style>"
    ],
    "description": "Vue 3 Single File Component Template"
  }
}

3，这样你在.vue的文件下输入 vue3 就可以自动出现模板了

二，安装 sass和sass-loader，使你的项目支持scss
1，安装依赖

npm i sass sass-loader -d

2，配置依赖
在vite.config.ts中，配置如下

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // 此处填写实际scss文件路径
        additionalData: `@import "./src/style/variables.scss";`,
      },
    },
  },
})