CODEWITHSUNDEEP
sass
Sven van den Boogaart
Sven van den Boogaart

Reputation: 12323

sass import variable in import file

I try to make different config files (for different colors) and use the variables in another file I import basic.scss, Im going to make multiple app.scss files like app1.scss and app2.scss which use different config files with different colors.

My config1.scss

$primary-color : #6a7dcc;
$primary-font-color: #ccc;

my basic.scss

body {
  background-color: $primary-color;
  color: $primary-font-color;
}

my app1.scss

@import "config2.scss";
@import "basic.scss";

This gives me the error:

Error: Undefined variable: "$primary-color". on line 2 of app/css/basic.sc

How can I use imported variables in other imported files?

Upvotes: 1

Views: 3499

Answers (3)

Pytth
Pytth

Reputation: 4176

Looks like you have a config1 and config2. Unless that is a typo, once you change your @import config2.scss to @import config1.scss it should work.

Tl;dr you arent importing the file where the variables were declared. Do that and it should work.

Upvotes: 0

Akash
Akash

Reputation: 377

File Config1.scss is having variable $primary-color and your are importing config2.scss (which is not having variable $primary-color) in your app1.scss, i think that is the reason

Upvotes: 0

Wim Mertens
Wim Mertens

Reputation: 1790

Try changing it to:

@import "_config2";
@import "_basic";

Upvotes: 3

Related Questions