Ember pod style component SCSS: variable undefined

Question

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?

Answer 1

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:

1. If @import:
   Is .../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:

2. 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?

3. 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.