Где лучше подключать Bootstrap стили во Vuejs проекте?

Question

[Sergey Nikolaev]

Проект создаю с помощью Vue CLI
Устанавливаю Bootstrap с помощью npm
Сейчас подключаю стили в корневом компоненте App.vue в разделе <script>

import 'bootstrap/dist/css/bootstrap.min.css'

export default {...}

Попадалась информация, что можно также подключать в корневом файле проекта main.js

import { createApp } from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.min.css'

createApp(App).mount('#app')

Если разницы нет, зачем платить больше, то где подключать лучше и почему?

Comments

[Александр]

Есть еще вариант подключить при помощи сборщика (webpack) и использовать bootstrap в формате sass: https://getbootstrap.com/docs/5.0/customize/sass/
Вот лоадер для этой цели: https://github.com/webpack-contrib/sass-loader
Плюс в том что bootstrap затянется в сборку не целиком, а только нужные его фрагменты.

[Sergey Nikolaev]

Aleksandr-JS-Developer, как вариант для чистоты кода - отличное решение. Благодарю за идею!

[Sergey Nikolaev]

Александр, об это возможности не знал, спасибо, буду разбираться. Как раз меня и волнует вопрос минимизации размера файлов после сборки.

Answer 1

[Sergey Nikolaev]

Разницы практически нет.
Это вопрос к количеству таких-вот подключений. Я вообще делаю отдельный модуль, называю его cssImports.js и там в столбик с комментами подключаю все сторонние библиотеки и импортирую в main.js

import '../imports/cssImports.js';

Спасибо за ответ Александр