Problem with sass import

help
1

Hey, I am using sass and I have problem with import.

This way to import working fine:

@import '{seba:ionic-sass}/scss/ionicons/ionicons';
@import '{seba:ionic-sass}/scss/ionic';

#auth {
  color: $balanced;
}

But this one not working:

#app.scss
@import ‘{seba:ionic-sass}/scss/ionicons/ionicons’;
@import ‘{seba:ionic-sass}/scss/ionic’;

@import '{}/client/scss/auth.scss';
// OR
// @import 'auth.scss';
// or without ".scss" but still the same

#auth.scss
#auth {
color: $balanced;
}

The error:
“While processing files with fourseven:scss (for target web.browser):
/client/scss/auth.scss: Scss compiler error: Undefined variable:
”$balanced"."

I think the problem is in the import of auth.scss, but I didn’t find solution

2

The reason is your auth.scss file tries to compile into auth.css as well, but does not have the correct variables declared in auth.scss itself.

An easy solution is to put an underscore as a prefix in the filename. This makes it that this file becomes a partial file and doesn’t compile automatically, but is able to be imported.

In short: try to rename auth.scss to _auth.scss

1 Like
3

Thanks! I didn’t tought it will solve the problem.

4

I have same problem with fourseven:scss@3.10.0 today, all file to import are added “_”.

I tried move to import/ui folder but no luck. Can anybody give a cue?