全局 Sass 变量 （Vue 3， Vite） get： [sass] 未定义的变量

问：

你好！！我正在尝试将 Vue 应用程序从 Webpack 迁移到 Vite。但是，我先从这个小项目开始。

基本上，当我尝试在 App.vue 组件中使用变量$globalColor时，我收到错误：“[sass] 未定义的变量”。正如您在我分享的代码中看到的那样，我在 Vite 中添加了 css 预处理器配置，但没有成功。我读了几篇文章，每个人都说这就是解决方案。

最终，我希望全局拥有 Bootstrap 混合和变量，因为我不想像在 App.vue 组件中那样将 Bootstrap 导入到每个组件中。

package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "sass": "^1.69.5",
    "vite": "^4.4.5"
  }
}

vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/scss/global.scss";`
      }
    }
  }
})

src/main.js

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

createApp(App).mount('#app')

src/style.scss

@import "@/scss/_vars";
@import "~bootstrap/scss/bootstrap";

src/scss/_var.scss

$my-padding-top: 64px;

src/scss/global.scss

$globalColor: pink;

src/App.vue 中

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div class="mt-5">
    aaaaaa
    <a href="https://vitejs.dev">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style lang="sass" type="text/sass" scoped>
@import "~bootstrap/scss/bootstrap"
@import "@/scss/_vars"

div
  color: $globalColor
  padding-top: $my-padding-top

@include media-breakpoint-down(lg)
  body
    background-color: $primary
</style>

提前非常感谢您！