Vue3+Vite迁移时Sass全局变量未定义问题求助

核心问题分析 #

1. Vite的css.preprocessorOptions仅配置了scss，但你的App.vue使用的是Sass缩进语法（lang="sass"），导致全局样式文件未被注入到Sass语法的组件样式中。
2. 文件名与导入路径不匹配（_var.scss vs @import "@/scss/_vars"），导致$my-padding-top也存在潜在报错。
3. 组件内重复导入完整Bootstrap，既冗余又可能引发样式冲突。

具体修复步骤 #

1. 补全Vite的Sass预处理器配置 #

修改vite.config.js，同时配置scss和sass的全局注入，覆盖两种语法场景：

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

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')
    }
  },
  css: {
    preprocessorOptions: {
      // 针对SCSS花括号语法
      scss: {
        additionalData: `@import "@/scss/global.scss"; @import "~bootstrap/scss/bootstrap/variables"; @import "~bootstrap/scss/bootstrap/mixins";`
      },
      // 针对Sass缩进语法（注意换行，不要分号）
      sass: {
        additionalData: `@import "@/scss/global.scss"
@import "~bootstrap/scss/bootstrap/variables"
@import "~bootstrap/scss/bootstrap/mixins"`
      }
    }
  }
})

注：仅导入Bootstrap的变量和混入模块，避免重复导入完整Bootstrap（已在style.scss中全局引入）

2. 统一文件名与导入路径 #

将src/scss/_var.scss重命名为src/scss/_vars.scss，与style.scss中的导入语句@import "@/scss/_vars";保持一致。

3. 清理组件内冗余代码 #

修改App.vue的样式部分，删除重复导入，直接使用全局变量和混入：

<style lang="sass" scoped>
div
  color: $globalColor
  padding-top: $my-padding-top

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

关键注意事项 #

• Vite对文件路径大小写敏感，确保所有导入路径与实际文件名完全匹配。
• additionalData是按预处理器类型分别生效的，SCSS和Sass需要单独配置。
• 全局注入Bootstrap模块时，优先导入变量和混入，避免全量导入导致的样式冗余。

内容的提问来源于stack exchange，提问作者jcbjob