В моем приложении Vue. js я успешно интегрировал Bulma. Я могу глобально настроить Bulma с помощью SASS, но я хотел бы применить настройку только для определенных компонентов c .Vue, а не для всего внешнего интерфейса.
Я нашел два решения для настройки указанных c Компоненты:
Раствор A
Приложение. vue
<style lang="scss">
@import '~bulma'; // This applies Bulma CSS to my whole frontend
</style>
MyComponent. vue
<style scoped lang="scss">
$input-color: red;
@import '~bulma';
</style>
Раствор B
Приложение. vue одинаковое
MyComponent. vue
<style scoped lang="scss">
$input-color: red;
@import '~bulma/sass/utilities/_all';
@import '~bulma/sass/form/_all';
</style>
Я думаю, что оба решения увеличивают размер полезной нагрузки, отправляемой клиенту из-за двойного импорта (один в App.vue, один в MyComponent.vue), при этом решение B импортирует меньше вещей.
Двойной импорт связан с тем, что мне приходится настраивать переменную перед импортом bulma, согласно документации Bulma.
Существуют ли другие способы достижения конечного результата настройки определенных c компонентов?