Переопределить переменные Bulma в проекте Nuxt.js, созданном с помощью пользовательского интерфейса Buefy?

Я создал проект nuxt.js и выбрал buefy в качестве UI-фреймворка, все работает нормально, однако я не могу получить доступ к переменным Bulma, чтобы изменить цвета основного класса кнопки, например, есть ли способ иметь возможность изменять переменные bulma sass, используя buefy в качестве инфраструктуры пользовательского интерфейса?

Это часть моего файла 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 / buefy.js:

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

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

Я хочу изменить, например, цвет фона этой кнопки:

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

Я хочу изменить цвет фона успешной работы, когда она активна, переменные здесь < / а>:


vue.js nuxt.js css buefy bulma
person luke cross    schedule 05.06.2021    source источник
comment
Я не знаю, как применить это к моей текущей структуре buefy с помощью nuxt.js: bulma.io/documentation/customize/with-node-sass.   -  person luke cross    schedule 06.06.2021

Ответы (1)


arrow_upward
0
arrow_downward

Мне удалось это решить!

Сначала мы изменили модули нашего nuxt.config.js / ts на:

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

Важно, чтобы css buefy был ложным, чтобы мы могли установить здесь scss:

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

Теперь просто создайте main.scss в каталоге, который вы определяете в css, и измените его по своему усмотрению. В моем случае я изменил переменные, которые окрашивают основные кнопки.

person luke cross    schedule 06.06.2021