как не переопределить файл CSS внутри блейд-файла php

Question

В моем app.js на laravel я импортировал библиотеку bootstrap-vuejs , и она использует Bootstrap 4

app.js

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css' //Bootstrap 4.3.1
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));

const app = new Vue({
    el: '#app',
});

и затем в моем файле php blade я просто назвал его

<script src="{{ asset('js/app.js')}}" defer></script>

однако мой php-файл blade-сервера имеет версию Bootstrap 3.3.7, потому что я использую шаблон администрирования laravel admin-lte

Проблема в том, что когда я обновляю страницу, шрифт / значки становятся больше при загрузке страницы.

но после загрузки страницы со временем она станет такой

Когда я комментирую загрузочный css в моем app.js

//import 'bootstrap/dist/css/bootstrap.css' (Bootstrap 4.3.1)

проблема решена, однако я не могу использовать загрузочный css внутри моего компонента vue

Есть идеи, как это исправить? потому что я думаю, что загрузчик внутри моего app.js переопределяет boostrap 3.3.7 внутри моего php-файла blade-сервера.

Answer 1

Попробуйте импортировать загрузочный CSS в ваш компонент там, где он вам нужен.

В компоненте vue, в теге style, когда он имеет атрибут scoped, CSS будет применяться только к текущему компоненту.

<style scoped>
  @import 'path/to/bootstrap_verison.min.css';
  /*CSS styles*/
</style>