title: Sass changes not showing up when page refreshed
body: <p>My Rails 4.2 now uses many Sass variables, and it was switched from relying on sprockets <code>require</code> statements to Sass <code>@import</code> statements. It now has 2 issues in development:</p>
  
  <ul>
  <li>Pages may load a little slower</li>
  <li>When I refresh a page, CSS changes don't always show up, so I need to open the page in a new tab.</li>
  </ul>
  
  <p>How can I fix this?</p>
  
  <p>application.css:</p>
  
  <pre><code>*= require_self
  *= require main.scss
  </code></pre>
  
  <p>main.scss:</p>
  
  <pre><code>@import "bootstrap";
  @import "base/variables.scss";
  
  @import "styles/home.scss";
  @import "styles/pages.scss";
  //remaining CSS pages
  </code></pre>
  
  <p>_home.scss:</p>
  
  <pre><code>/* various styles, no import statement */
  </code></pre>
  
  <p>_variables.scss:</p>
  
  <pre><code>$color-red: #F23C3A;
  //...
  </code></pre>