是否覆盖Buefy UI生成的Nuxt.js项目中的bulma变量

Question

我创建了一个nuxt.js项目，并选择buefy作为UI框架，一切都很好，但我无法访问Bulma的变量来更改"是主要的"；例如，有没有任何方法可以使用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'

最后，我的buefy.js在.nuxt/boefy.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>

我想改变成功的背景色，当它处于活动状态时，变量如下：

Answer 1

我设法解决了它！

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

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

重要的是，buefy的css是false，这样我们就可以在这里设置scs:

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

现在，只需在css中定义的目录中创建main.scss，然后按照自己的方式进行修改。在我的例子中，我更改了主按钮的颜色变量。