Не могу добавить 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 server, но стиль bulma / buefy не отображается.

Answer 1

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

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

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

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

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

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

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

Answer 2

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

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

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

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