Vite + Vue中的Bootstrap样式

8yparm6h  于 2022-11-25  发布在  Vue.js
关注(0)|答案(1)|浏览(188)

我刚刚推出了一个带有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样式适用于整个应用程序。

sg2wtvxw

sg2wtvxw1#

别问我为什么,但现在起作用了...

相关问题