vue.js - 无法将 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';

在资产/scss 中：

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

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

score 0 · Accepted Answer

尝试仅在 vue 组件上导入您定义和导入的 style.scssbulma

为避免一些问题，<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：更多配置请查看文档。

score 0 · Accepted Answer

也许github存储库的链接也会对您有所帮助？

我看不到您的代码中缺少什么。如果您需要更多帮助，一个 jsfiddle 示例可以提供帮助。

2 回答 2