我目前正在使用Vite和Bootstrap 5.2构建一个VueJS 3应用程序，我想在我的一些组件中使用reakpoint mixin，但我无法在所有组件中导入bootstrap .scss文件。
我想只导入一次，并且能够在整个代码中使用所有的引导函数/mixin。

This is what I have already tried (none of them worked for me):

1. Add `bootstrap` file import to `css > preProcessors > scss > additionalData` `vite.config.js` settings:

//vite.config.js

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'),
      find: '@vue/runtime-core',
      replacement: '@vue/runtime-core/dist/runtime-core.esm-bundler.js',
      '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
    }
  },
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "~bootstrap/scss/bootstrap";`
      }
    }
  }
})

1.创建一个./src/assets/styles.scss文件，将bootstrap导入其中并将其添加到css > preProcessors > scss > additionalDatavite.config.js设置中：

// vite.config.js (rest of settings equal to the one above)
css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/styles.scss";`
      }
    }
  }

./src/assets/styles.scss

@import "~bootstrap/scss/bootstrap";

1.在main.js文件中导入相同的./src/assets/styles.scss文件
1.在main.js中导入bootstrap文件
我还有一个问题：如果我做了唯一起作用的事情，即在我想要的每个Vue组件上导入bootstrap文件：它会影响性能，因为（据我所知） Bootstrap 将完全导入所有的时间？
我非常乐意分享该项目的任何其他细节，以试图得到一些答案。