使用卡片时，Bootstrap Vue 不显示 css答案

【问题标题】：Bootstrap Vue does not display the css when using cards使用卡片时，Bootstrap Vue 不显示 css
【发布时间】：2020-06-19 07:33:22
【问题描述】：

最近我开始使用 bootsrap vue。我写了以下代码：

<template>
    <div>
      <div>
        <b-card-group>
          <b-card border-variant="dark" header="Dark" align="center">
            <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
          </b-card>
        </b-card-group>
      </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { BCard, BCardText, BCardGroup, } from 'bootstrap-vue';

    export default {
        components: {
            'b-card': BCard,
            'b-card-text': BCardText,
            'b-card-group': BCardGroup,
        },

        // More code
    }
</script>

示例取自docs：

但由于某种原因，我没有得到 css 设计（边框和颜色）：

它只是显示纯文本。可能是什么问题？我没有使用组件吗？

编辑：我的main.js 看起来像：

import Vue from 'vue';
import App from '../components/App.vue';
import router from '../router/router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

new Vue({
  el: '#app',
  router,
  components: {
    'app': App
  },
});

但还是不行。

Edit2：我的 webpack 文件：

const webpack = require('webpack');
const path = require('path');

module.exports = {
    entry: './public/js/main',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'public')
    },
    stats: {
        warnings: false
    },
    module: {
        loaders: [
            {
                // compiles js files
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015']
                }
            }, {
                // compiles html files
                test: /\.html$/,
                loader: 'raw-loader'
            }, {
                // compile vue files
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                // compile css files (basically, bootstrap)
                test: /\.css$/,
                use: ['vue-style-loader', 'css-loader']
            }, {
                // compile fonts and other type of files mentioned in regex
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: path.join('assets', 'fonts')
                    }
                }]
            }
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js',
            'vue-router': 'vue-router/dist/vue-router.common.js',
            'bootstrap-css': 'bootstrap/dist/css/bootstrap.min.css'
        },
    }
}

会不会有问题？

【问题讨论】：

为什么你的组件中有import Vue from 'vue'？你试过删除那条线吗？
它从以前就一直呆在那里。我删除了它，但它仍然无法正常工作。我现在怀疑 webpack。我会更新我的帖子。
您是否检查过 DOM 以查看类是否正确应用于您的元素？
@Hiws 我试图检查开发工具中的代码。类是存在的，但它们是空的。
@vesii 那么问题是什么，我也面临同样的问题。

标签： css vue.js vuejs2 bootstrap-vue

【解决方案1】：

尝试在您的 html 元素上使用类，例如：

<b-card-group>
   <b-card class="cards">
      <b-card-text>Lorem ipsum</b-card-text>
   </b-card>
</b-card-group>

【讨论】：

对我没有帮助：/

【解决方案2】：

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

写在 app.js 文件中

更详细的解释https://bootstrap-vue.js.org/docs/

【讨论】：

嗨，诺亚，谢谢，但看起来这不是问题（请参阅我的编辑）。