[2028] Customizing Buefy in nuxt.js

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.