Bulma: Cannot customize Bulma's variables in Vue Webpack template

[ethanttbui]

Overview of the problem

This is about the Bulma CSS framework
This is about the Bulma Docs
I'm using Bulma version [0.4.4]
My browser is: Chrome
I am sure this issue is not a duplicate?

Description

I installed Bulma in my Vue Webpack project and attempted to customize it in the App.vue root component. My code is as follows:

<style lang="sass-loader">
@import '~bulma/sass/utilities/initial-variables'

/* override initial variables */
$blue: #7dc2af
$turquoise: #41b3a3

@import '~bulma/bulma';
</style>

This does not work, even though (as far as I am concerned) it conforms to the instructions provided by Bulma's Docs. I've looked into some relevant discussions but none of them was helpful. I would highly appreciate any timely reply.

Steps to Reproduce

1. Download and initialize a Vue Webpack project (detailed instructions here)
2. Install Bulma using: npm install bulma --save
3. Edit App.vue file

Expected behavior

All customized colors should change accordingly.

Actual behavior

The weird thing is that only $turquoise (and $primary as a result) changes as expected, any other color will stay the same as the default one.

[ethanttbui]

I have come to realize that bulma's variables are only for customizing bulma's styles, and they are not supposed to be accessed directly in css.

[magpiedigital]

This is old but it's misleading. You can override bulma variables and you have to do it before importing bulma.

<style lang="scss">
  $blue: #72d0eb;
  @import '~bulma';
</style>

This is because Bulma uses Sass' default functionality.