Setting $divider-content-background-color does not do anything

[unikitty37]

The background colour of the divider text seems to be stuck at #fff no matter what I do.

This is my base.scss:

@import '~bulma/sass/utilities/initial-variables';
@import '~bulma/sass/utilities/functions';
@import 'variables';
@import '~bulma';
@import '~bulma-divider';

I have this line in variables.scss:

$divider-content-background-color: $body-background-color;

and I've also tried explicitly putting that line immediately before and after

@import '~bulma-divider';

but it ignores me and sets the background colour of the divider text to pure white, which looks ugly when the page background isn't pure white.

It's odd, since bulma-divider sets the variable with !default, so I should be able to override it — the inspector shows that the CSS is coming from bulma-divider.min.css so the only thing I can think of is that it's not actually compiling it but using the dist/bulma-divider.min.css that's in the repo.

This is a Rails app using webpacker and Vue — I can confirm that changing one of Bulma's variables (like $body-background-color) and reloading the page causes webpack-dev-server to compile everything, so I don't think it's an issue with compiles not being triggered.

Please could you tell me how can I get it to compile itself and use the value in the variable, rather than the pre-built version?

(As an aside, would it not be better to default to Bulma's page background colour rather than $white? That would make it work for more people out of the box, as most people won't need to set $divider-content-background-color at all…)

[josiahp]

I was able to work around this issue with the following code:

  .is-divider[data-content]::after {
    background-color: $body-background-color;
  }

Another line would be necessary if you're using the vertical divider.

[gutisalex]

same problem here... came up with the same workaround but it should work with the default vars