I am working on a pod-style ember app that uses ember-cli-sass
, and ember-component-css
.
I defined a variable in app/styles/app.scss
that looks like this:
$yellow: #f2d173;
But when I try to use that variable in the scss file of a component located at: app/components/login-form/styles.scss
, I get an error that reads:
Error: Undefined variable.
I would have expected the app.scss file to get loaded first, and for my variable to be accessible within my components - but something is not working perfectly.
Does any one know how to get application-wide scss/sass variables to be accessible in my components?
Could be a problem with including the file(s) / passing the var ... some more Infos about your project organization would help ...
How do you organize/include your modules/files (@import
or new rule @use
)?
How is the file/dicrectory structure of your project?
If you work the traditional way with @import
the order of importing the files/modules to the main file is important. You may check:
@import
:.../login-form/styles.scss
imported to the main.scss AFTER the variable is set in app/styles/app.scss
?(If you are using ember pod style css files, you are probably importing your login-form
's styles from @import "pod-styles";
, ensure that your variable definition is before that line!)
If you indeed work with new technique @use
it is another way round and can be a little bit tricky. You may check:
If @use
:
Is the file where the variable is set (app/styles/app.scss
) @use
'd to .../login-form/styles.scss
where you need the variable?
Alertnative if @use
:
If the module app/components/login-form/styles.scss
is @use
'd itself, did you pass your variable to the module when you @use
it?
As @use
is new, here ar some more infos about how it works: https://sass-lang.com/documentation/at-rules/use.