Nuxt.js: Customizing Buefy in nuxt.js

[Isa79]

So I have followed the guide here but with no luck getting the customization to work. I have installed sass-loader and node-sass.

Navbar.vue (a component in the components folder)

<template>
  <nav class="navbar has-shadow is-light">
    <div class="container">
      <div class="navbar-brand">
        <nuxt-link to="/" class="nav-item">
          <img src="~/assets/logo.png">
        </nuxt-link>
      </div>
      <div class="navbar-menu">
        <div class="navbar-start">
          <nuxt-link to="/" class="nav-item is-tab" exact>Home</nuxt-link>
          <nuxt-link to="/about" class="nav-item is-tab" exact>About</nuxt-link>
        </div>
      </div>
    </div>
  </nav>
</template>

<style lang="scss">
  @import "~bulma/sass/utilities/_all";

  $primary: blue;
  $navbar-tab-active-border-bottom-color: red;

  @import "~bulma";
  @import "~buefy/src/scss/buefy";
</style>

nuxt.config.js

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'test',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Run ESLint on save
    */
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },
  mode: 'spa',
  plugins: ['~plugins/buefy'],
  router: {
    linkActiveClass: 'is-active'
  }
}

$primary and $navbar-tab-active-border-bottom-color are not blue or red.

_{This question is available on Nuxt.js community (#c1802)}

[clarkdo]

Can you offer a demo repo which can reproduce the issue ?

[Isa79]

@clarkdo I don't know how to do that. Basically all I am trying to do is customizing Buefy with sass. They have a guide in their docs (which I have linked) but it doesn't work. I tried to change the $primary and $navbar-tab-active-border-bottom-color variables to blue and red but they remain the same color (purple). Am I doing something wrong?

[clarkdo]

I mean could you upload you codes (just the simple package.json, plugins are fine) into github or jsfiddle ? So that we can further locate the cause of the problem.

[Isa79]

@clarkdo package.json and buefy.js (which is in the plugins folder).

[clarkdo]

I created a pr https://github.com/nuxt/nuxt.js/pull/2035, the $primary and $navbar-tab-active-border-bottom-color both worked.

[Isa79]

@clarkdo So the $primary works for me but not $navbar-tab-active-border-bottom-color. Maybe this is a issue on bulma/buefy side? Not being able to change some variables even though it's stated in the docs that you can.

[clarkdo]

It works, navbar-item instead of nav-item

[Isa79]

@clarkdo Oh sorry. A mistake on my part. Thank you very much for the help.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.