Vite+Vue3+Bootstrap5.2：如何全局引入SCSS避免组件重复导入？

一、解决全局导入失败的问题 #

你之前的尝试失败核心原因是additionalData中的HTML转义字符"导致导入路径解析错误，同时部分配置冗余。以下是正确的配置方案：

修正后的Vite配置 #

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

export default defineConfig({
  server: {
    port: 8080
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
    }
  },
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 直接使用原生引号，无需HTML转义
        // 按需导入核心文件（仅函数、变量、混合宏），避免引入冗余全局样式
        additionalData: `
          @import "~bootstrap/scss/functions";
          @import "~bootstrap/scss/variables";
          @import "~bootstrap/scss/mixins";
        `
        // 若需全量导入Bootstrap样式，替换为：
        // additionalData: `@import "~bootstrap/scss/bootstrap";`
      }
    }
  }
})

验证配置 #

在任意Vue组件的SCSS代码中直接使用Bootstrap混合宏即可，无需单独导入：

<style scoped lang="scss">
.custom-card {
  @include media-breakpoint-up(md) {
    margin: 1rem 0;
    padding: 2rem;
  }
}
</style>

二、关于重复导入的性能疑问 #

如果在每个组件中单独导入Bootstrap SCSS文件，不会导致最终打包产物中出现重复的Bootstrap代码——SCSS预处理器在编译阶段会自动去重重复的导入，Vite的CSS打包逻辑也会合并冗余样式。

但这种做法会增加每个组件SCSS的编译时间，同时代码中会出现大量重复的@import语句，不利于维护。因此全局导入是更优的方案。

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