0

I am using library 'keen-ui' in my project. That lib uses sass, to define styles. I want to override this styles. I connected sass loader to my project and it works fine, but problem is that sass loader loads my file 'variables.scss' before standard 'variables.scss' of keen-ui, so it does not override variables. Can someone suggest a way to load my custom 'variables.scss' after standard?

Fairy
  • 509
  • 1
  • 9
  • 27

1 Answers1

0

Maybe you can import your dependencies directly from your .scss main file, and choose by yourself the order. For instance:

@import '.node_modules/Keen-UI/src/styles/utils;
@import 'my-variables';
@import '.node_modules/Keen-UI/src/styles/variables;
@import '.node_modules/Keen-UI/src/styles/mixins;
@import '.node_modules/Keen-UI/src/styles/components;

I used to import Bootstrap this way, so I could have some control on the framework components and be sure to only import the components I actually use.

But your issue might be something else since it appears that the variables from Keen-UI all have a !default flag, meaning that the reference is only used if there is no similar reference before or after...

https://github.com/JosephusPaye/Keen-UI/blob/next/src/styles/variables.scss

Thibault
  • 424
  • 5
  • 5