无法将Buuly 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

我还在github项目https://github.com/Bloemert/Einstein/blob/develop/src/Einstein.WebUI/ClientApp/styles/site.scss

上使用Buefy

与bulmaswatch一起：https://jenil.github.io/bulmaswatch/

也许链接也可以帮助github存储库吗？

我看不到代码中缺少的内容。如果您需要更多帮助，请使用jsfiddle示例。

Answer 2

尝试仅在vue组件上导入您定义并导入bulma的style.scss

为避免出现某些问题，在使用buefy时请使用<style lang="scss" scoped>。

在配置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：要进行进一步的配置，请访问documentation。