SASS Importing In Wrong Order
<p>I'm currently having an issue with SASS. When using the <code>@import</code> statement, it doesn't seem to acknowledge that I am importing a certain file before the others, causing some variables not to be declared. I am trying to make some simple changes to Bootstrap. The folder structure is as follows:</p>

<p><a href="https://i.stack.imgur.com/ynVZt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ynVZt.png" alt="folder structure"></a></p>

<p>My <code>app.scss</code> is the main entry point, which is as follows:</p>

<pre><code>@import url('https://fonts.googleapis.com/css?family=Open+Sans|Droid+Sans+Mono|Droid+Serif'); //Basic fonts
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap"; //Bootstrap
@import "bower_components/font-awesome/scss/font-awesome"; //Font Awesome

//Bootstrap style changes
@import "variables";

@import "components/alerts";
@import "components/buttons";
@import "components/dropdowns";
@import "components/forms";
@import "components/labels";
@import "components/navbars";
@import "components/pagination";
@import "components/panels";
@import "components/progress";
</code></pre>

<p>The issue is, the variables file isn't being imported either at all or before the other files are being loaded. This is a rather odd thing that I can't seem to figure out. I'd appreciate any help you can provide :)</p>