Bootstrap Vue не отображает css при использовании карт - PullRequest
Новая
       35

Bootstrap Vue не отображает css при использовании карт

0 голосов
/ 06 марта 2020

В последнее время я использую 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>

Пример был взят из документов :

enter image description here

Но по какой-то причине я не понимаю дизайн css (границы и цвета):

enter image description here

Это просто показывает простой текст. В чем может быть проблема? Разве я не использую компонент, верно?

РЕДАКТИРОВАТЬ : Мой 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: Мой файл веб-пакета: 

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'
        },
    }
}

Может ли быть проблема?

Ответы [ 2 ]

1 голос
/ 06 марта 2020 
// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

запишите это в приложение. js файл

Для более подробного объяснения https://bootstrap-vue.js.org/docs/

0 голосов
/ 06 марта 2020

попробуйте использовать класс для элемента html, например: 

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