How and where can I import a common SCSS files, so that it gets available in every scss files?

I have scss files that use variables for colors. like -

.label-primary, .badge-primary {
  background-color: $navy;
  color: #FFFFFF;
}

.label-success, .badge-success {
  background-color: $blue;
  color: #FFFFFF;
}

.label-warning, .badge-warning {
  background-color: $yellow;
  color: #FFFFFF;
}

These variables are defined in variables.scss file

I have already @imported @import "base/variables"; in application.css.scss file.

// Variables, Mixins
@import "base/variables";
@import "base/mixins";

but still it doesnt loads in other scss files and throws error Sass::SyntaxError: Undefined variable: "$navy". where trying to precompile in production.

I have to explicitely @import "base/variables"; in every scss file on the top. there are 35 files.

How can i define this variable.scss file in just one place so that its loaded in every scss file?

NOTE: I am using rails-api gem and the application is API only. I have tweaked a bit to make some views on this application.