Я недавно переключился на Vue - bootstrap. Я написал следующий код:
<div>
<div class="col-sm-3">
<b-card no-body class="mb-1" border-variant="primary">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block disabled href="#" v-b-toggle.accordion-1 variant="info">Search:</b-button>
</b-card-header>
<b-collapse id="accordion-1" visible accordion="my-accordion" role="tabpanel">
<b-card-body>
Why it works?
</b-card-body>
</b-collapse>
</b-card>
</div>
</div>
Если я вставлю его в live полученного мной сообщения:
Содержит границу. Если я запускаю локально тот же код (кроме текста), я получаю:
Почему это происходит?
В моем веб-пакете Я правильно компилирую:
{
// compile css files (basically, bootstrap)
test: /\.css$/,
use: ['style-loader', 'vue-style-loader', 'css-loader']
}
Также в обоих основных. js и в приложении. vue У меня есть:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';