无法将Bulma的Buefy添加到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';

在assets/scss中：

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

我重新启动了vue服务器，但是bulma/buefy样式没有显示。

Answer 1

我在github项目中也使用了Buefy：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组件上导入您定义并导入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。