Sass changes not showing up when page refreshed

Question

My Rails 4.2 now uses many Sass variables, and it was switched from relying on sprockets require statements to Sass @import statements. It now has 2 issues in development:

• Pages may load a little slower
• When I refresh a page, CSS changes don't always show up, so I need to open the page in a new tab.

How can I fix this?

application.css:

*= require_self
*= require main.scss

main.scss:

@import "bootstrap";
@import "base/variables.scss";

@import "styles/home.scss";
@import "styles/pages.scss";
//remaining CSS pages

_home.scss:

/* various styles, no import statement */

_variables.scss:

$color-red: #F23C3A;
//...

Answer 1

In your config/environments/development.rb, ensure that it includes

config.cache_classes = false

This way, all assets and code will be reloaded each time the page is refreshed. You will usually only need to reload the server after a migration.

Answer 2

One thing I would look at would be removing the file extensions of your Sass imports, and also renaming application.css to application.scss so the file knows it will be precompiling Sass to CSS.

application.scss

@import "main";

main.scss

@import "base/variables";
@import "styles/home";
@import "styles/pages";

If you are using Bootstrap Sass their documentation walks through setting up your file structure to include Sass in your project.