How can i use global scss variables overwrite my node modules

Question

I created a personal UI-framework (react-components),and want to share the framework with some of my projects.

For good management, I want to upload my framework on NPM.

I used SCSS for my framework consisting of one global SCSS variables file. How would I approach this if I want to use a different global variable value for each project? I want to set my global variable file out of the node-modules folder.

Would this affect global variables into the node-module from out of the node-modules folder?

Any solution would be greatly appreciated.

Answer 1

SCSS allows you to define default values for variables, which can be overruled.

Example file in your project app.scss

$some_color: blue;
@import 'node_modules/yourframework/main'; // This is your frameworks main file

Example file in your framework node_modules/yourframework/main.scss

$some_color: red !default;
body{
   background-color: $some_color;
}

This will result in your body's background being blue.

Good luck!