Loading bootstrap css and then overriding root variables

[scdigitalmedia]

I have GrapesJs loading with Bootstrap styles, however, I'm building a CMS and on my front end I have overrides for certain bootstrap root variables, ie. primary, secondary colors. I'd like to be able to import these overrides into GrapesJS so the editor is using the same styles(and overrides) as the front end of the site.

I've tried adding CSS rules, with "!important" but it looks like the CSS url from Canvas -> styles is being loaded first, and then my css rule being added afterwards. I've also tried the cssParser as well, but it looks to be loading in the same order(bootstrap first, then overrides)

What would be the best way to achieve this?

[artf]

@scdigitalmedia are you able to create a reproducible demo of your use case?

[scdigitalmedia]

Here's a sandbox i quickly put together: https://codesandbox.io/s/billowing-hill-1qp034

[artf]

You can create your CSS file and place it in config.canvas.styles as you're already doing with bootstrap.