文章/答案/技术大牛

发布

社区首页 >问答首页 >是否覆盖使用Buefy UI生成的Nuxt.js项目中的bulma变量？

问是否覆盖使用Buefy UI生成的Nuxt.js项目中的bulma变量？
EN

Stack Overflow用户

提问于 2021-06-06 05:52:25

回答 1查看 203关注 0票数 0

我创建了一个nuxt.js项目，并选择buefy作为UI框架，一切正常，但是，我不能访问bulma的变量来更改按钮的" is -primary“类的颜色，例如，有没有方法可以使用buefy作为UI框架来修改bulma sass变量？

这是我在项目根目录下的一段nuxt.config.js文件：

modules: [
    // https://go.nuxtjs.dev/buefy
    'nuxt-buefy',
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

下面是如何将文件导入到.nuxt/App.js中：

import Vue from 'vue'
import { decode, parsePath, withoutBase, withoutTrailingSlash, normalizeURL } from 'ufo'

import { getMatchedComponentsInstances, getChildrenComponentInstancesUsingFetch, promisify, globalHandleError, urlJoin, sanitizeComponent } from './utils'
import NuxtError from '..\\layouts\\error.vue'
import NuxtLoading from './components/nuxt-loading.vue'
import NuxtBuildIndicator from './components/nuxt-build-indicator'

import '..\\node_modules\\buefy\\dist\\buefy.css'

import _6f6c098b from '..\\layouts\\default.vue'

最后是.nuxt/buefy.js路径中的buefy.js：

import Vue from 'vue'
import Buefy from 'buefy'

Vue.use(Buefy, {
  "css": true,
  "materialDesignIcons": true,
  "materialDesignIconsHRef": "https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css",
  "async": true
})

我想要的是改变，例如，这个按钮的背景颜色：

<button class="button is-success is-outlined is-rounded">
              <strong>Cadastre-se</strong>
</button>

当is-success处于活动状态时，我想更改它的背景颜色，变量为here

css

vue.js

nuxt.js

bulma

buefy

回答 1

Stack Overflow用户

发布于 2021-06-06 08:37:21

我设法解决了这个问题！

首先，我们将nuxt.config.js/ts的模块更改为：

modules: [
    ['nuxt-buefy', { css: false}],    
  ],

buefy的css为false是很重要的，这样我们就可以在这里设置scss：

css: [
    '@/assets/scss/main.scss',
  ]

现在，只需在您在css中定义的目录中创建main.scss，并按您的方式修改它。在我的例子中，我更改了主按钮的颜色变量。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67854184

复制

相似问题

问是否覆盖使用Buefy UI生成的Nuxt.js项目中的bulma变量？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否覆盖使用Buefy UI生成的Nuxt.js项目中的bulma变量？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否覆盖使用Buefy UI生成的Nuxt.js项目中的bulma变量？
EN