在使用 Buefy UI 生成的 Nuxt.js 项目中覆盖 bulma 变量？答案

【问题标题】：Override bulma variables in Nuxt.js project generated with Buefy UI?在使用 Buefy UI 生成的 Nuxt.js 项目中覆盖 bulma 变量？
【发布时间】：2021-08-23 12:12:26
【问题描述】：

我创建了一个 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:

【问题讨论】：

我不知道如何将它应用到我当前使用 nuxt.js 的 buefy 结构中：bulma.io/documentation/customize/with-node-sass

标签： css vue.js nuxt.js bulma buefy

【解决方案1】：

我设法解决了！

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

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

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

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

现在只需在您在 css 中定义的目录中创建 main.scss 并按照您的方式修改它。就我而言，我更改了为主按钮着色的变量。

【讨论】：