Ember pod style component SCSS: variable undefined

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?