title: Nuxt - Bulma variable overrides not taking effect
body: <p>I'm struggling to override some but not all Bulma (via Buefy) Sass variables in Nuxt.</p>
  <p>My overrides file is being loaded, because I can see some styles being overridden e.g. background colour. But I cannot override any of the others.</p>
  <pre><code>$button-background-color: pink; //&lt;-- only one that works
  $button-text-color: white;
  $button-text-decoration: underline;
  $button-text-hover-background-color: red;
  $button-text-hover-color: white;
  </code></pre>
  <p>The button I'm testing on:</p>
  <pre><code>&lt;b-button&gt;Test button&lt;/b-button&gt;
  </code></pre>
  <p>If I inspect the DOM, I can see the styles are being loaded from the Bulma defaults and my overrides never show up in any of the loaded CSS, so it doesn't seem to be a precedence issue.</p>
  <p>Here's how I'm loading Bulma/Buefy and my overrides.</p>
  <p>nuxt.config.js</p>
  <pre><code>css: [
      '~/assets/css/buefy-init.scss'
  ],
  </code></pre>
  <p>buefy-init.scss</p>
  <pre><code>@import &quot;~bulma/sass/utilities/derived-variables&quot;;
  @import &quot;~/assets/css/project-vars.scss&quot;;
  @import &quot;~bulma/bulma&quot;;
  @import &quot;~buefy/src/scss/buefy&quot;;
  </code></pre>
  <p>project-vars.scss</p>
  <pre><code>$button-background-color: pink; //&lt;-- only one that works
  $button-text-color: white;
  $button-text-decoration: underline;
  $button-text-hover-background-color: red;
  $button-text-hover-color: white;
  </code></pre>
  <p>Am I missing something?</p>