我刚刚推出了一个带有Composition API的小Vue3应用程序。我包括了Bootstrap，Bootstrap正在工作。所有的组件都渲染得很好，看起来很好。
现在我希望卡片组件有一个半透明的背景（rgba（255，255，255，0.7）。但是我的.card样式都没有出现在前端，它们甚至没有被加载到Inspector中或被覆盖（什么都没有，只有Bootstrap卡片组件样式）。
我想知道我做错了什么。这是我当前的设置：

维生素配置js：

import { fileURLToPath, URL } from 'node:url'

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

const path = require("path");
export default defineConfig({
  plugins: [vue()],
  resolve: {
    extensions: [
      ".mjs",
      ".js",
      ".ts",
      ".jsx",
      ".tsx",
      ".json",
      ".vue",
      ".scss",
    ],
    alias: {
      "@": path.resolve(__dirname, "./src"),
      '~bootstrap': 'bootstrap'
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "src/assets/scss/styles.scss";`,
      },
    },
  },
  server: {
    port: 8090,
  },
});

我的文件结构：

源代码

• 资产
• 短节
• 零部件
• card.scss
• 全局的
• mixins.scss
• 变量.scss样式.scss
• 图片
• 零部件
• 路由器
• 储存
• 检视
• App.vue
• main.js
  我的名片。scss：

.card {
    background: rgba(255, 255, 255, 0.6) !important
}

我的样式.scss

@import 'global/variables.scss';
@import 'global/mixins.scss';
@import 'components/card.scss';

我的主.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"

const app = createApp(App)

app.use(createPinia())

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

我试着从main.js中删除bootstrap css，并首先将其添加到styles.scss中，但Bootstrap根本不起作用（我使用了node_modules路径）。我需要card.scss样式适用于整个应用程序。