Не могу добавить Buefy of Bulma в проект Vuejs

Question

У меня есть проект Vus.js, и я хочу добавить каркас bulma и / или buefy.

Я побежал npm install bulma а также npm install buefy

в main.js у меня есть:

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

в App.vue я также пытаюсь загрузить bulma:

<style lang="css">
@import '../node_modules/bulma/css/bulma.css';

в активах /scss:

@import "~bulma";
@import "~buefy/src/scss/buefy";

Я перезапустил сервер vue, но стиль bulma/buefy не отображается.

Answer 1

Я также использую Buefy в проекте github: https://github.com/Bloemert/Einstein/blob/develop/src/Einstein.WebUI/ClientApp/styles/site.scss

Вместе с bulmaswatch: https://jenil.github.io/bulmaswatch/

Может быть, вам тоже поможет ссылка на репозиторий github?

Я не вижу, чего вам не хватает в вашем коде. Пример jsfiddle может помочь, если вам нужна дополнительная помощь.

Answer 2

Попробуйте импортировать в компонент vue только тот стиль.scss, который вы определили и импортировали bulma

Чтобы избежать некоторых проблем, используйте <style lang="scss" scoped> при использовании buefy.

В файле, который вы настроили bulma, попробуйте выполнить следующие операции импорта:

// Accessing all the bulma's core
@import '~bulma/sass/utilities/_all.sass'
@import '~bulma/bulma';

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

"nuxt-sass-resources-loader" && "node-sass": "^4.11.0"

Ps: для дальнейшей настройки посетите документацию.