How to expose SCSS variables from a gem into a rails project with a single `@import`

Question

I have a rails project and a gem. The rails project has .scss files that require variables from the gem:

Rails Project

application.scss:

@import "gem-styles.scss";  
@import "my-scss-file-that-needs-access-to-variables.scss"

my-scss-file-that-needs-access-to-variables.scss:

color: $primary-color;

Gem

in gem-styles.scss:

@import "common/variables";

in common/_variables.scss:

$primary-color: #00d9ff;

Doing this, I get the error: Undefined variable: "$primary-color".

I can include common/variables in my-scss-file-that-needs-access-to-variables.scss to fix the issue:

@import "common/variables";

but I don't find that solution DRY enough. I would have to import common/variables into every .scss file that requires them. I would prefer to be able to only import one .scss file from the gem which contains all of the variables that I need exposed in my parent application, as well as the rest of the styles from gem-styles.scss .

Answer 1

you can just paste this @import "common/variables"; into your application.scss only once.

@import "common/variables";
@import "gem-styles.scss";  
@import "my-scss-file-that-needs-access-to-variables.scss"

like this