Пользовательская таблица стилей в index.html не переопределяет Bootstrap 5, установленный с помощью NPM ⇐ CSS

[Anonymous]

В моем проекте Vue 2 я установил Bootstrap 5.3 с помощью NPM, но моя пользовательская таблица стилей CSS в коде index.html не переопределяет CSS Bootstrap.
У меня не было проблем при загрузке Bootstrap через CDN. Кроме того, мой собственный CSS, добавленный непосредственно в компоненты, правильно переопределяет CSS Bootstrap. Переопределяется просто моя глобальная таблица стилей в index.html.
Мой файл main.js выглядит так:

Код: Выделить всё

import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'
import store from './store'
import VueI18n from 'vue-i18n'

Vue.use(Vuex)
Vue.use(VueI18n)

Vue.use(Bootstrap)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

new Vue({
store: store,
router,
i18n,
beforeCreate() { this.$store.commit('initialiseStore');},
render: h => h(App),
}).$mount('#app')

А мой index.html выглядит так:

Код: Выделить всё

Мне удалось заставить это работать, удалив ссылку на таблицу стилей из index.html и вставив приведенный ниже код в App.vue:

Код: Выделить всё

@import '/media/css/layout.css';
@import '/media/css/mobile.css';

Но я не знаю, правильный ли способ сделать это — вызвать мою собственную таблицу стилей в App.vue. И нужно ли мне ссылаться на Bootstrap в index.html, если он установлен NPM? Если да, то как это сделать, если его папка находится в node_modules?

Подробнее здесь: https://stackoverflow.com/questions/761 ... d-with-npm