Recently, I delved into the world of Bootstrap Vue and wrote the code snippet below:
<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>
I referenced this example from the official documentation:
https://i.sstatic.net/at576.png
However, when implementing it, I'm not seeing the expected CSS design (borders and colors):
https://i.sstatic.net/Fgd6O.png
The output only displays plain text. Could there be an issue with how I'm using the component?
EDIT: My main.js configuration is as follows:
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
},
});
Despite this setup, the desired design is not rendering.
Edit2: Here's my webpack file:
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: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}, {
test: /\.html$/,
loader: 'raw-loader'
}, {
test: /\.vue$/,
loader: 'vue-loader'
}, {
test: /\.css$/,
use: ['vue-style-loader', 'css-loader']
}, {
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'
},
}
}
Is there a potential issue within this setup that could be causing the problem?