Variables are global with SASS but not SCSS

Question

I have my application.css.scss set like this:

@import "base/variables";
@import "./application/application";

Like the documentation says I am not using Sprockets' directives (require, require_tree, and require_self) at all so I expect my variables defined inside of base/_variables.scss to be globals and available for my /application/application.scss file but it's not the case:

#content {
  margin-top: $big;
}

Will return the error Undefined variable: "$big".

I've tried the same thing with SASS by naming by files application.css.sass and /application/application.sass and while the variables now do seems to be globals I'll like to keep using the SCSS syntax, I've tried that by setting config.sass.preferred_syntax = :scss but I'm still being asked for Sass.

Of course I could just import my variables file everytime I need my variables but that would go against the DRY principle.

Is that possible to use the SCSS syntax while making my variables globally available? What am I missing here? Thanks in advance.

Answer 1

My application/application.scss was being precompiled (in assets.rb) by an old rule using a wildcard, which I missed, it's now working correctly.

Answer 2

What versions of sprockets, rails and sass-rails gems do you have? There were some problems around undefined variables, maybe try to bump up sass-rails and sprockets (if possible).