Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Gulp Basics Improving your Gulp Task Pipelines The Development Pipeline in Depth

Andres Ramirez
Andres Ramirez
18,094 Points

Changes in _variables.scss file not taking effect...

So I followed all through the tutorial and everything worked just fine, but at the point where I opened the _variables.scss file, and changed the color to green as instructed - no changes took effect! :(

I ran the gulp serve in one tab, and also the http-server on other tab, even closed everything and re-opened to refresh, and can't get the changes to take effect.

Any suggestions?

Corey Hayden
Corey Hayden
11,717 Points

I'm having the same problem. This is happening with Chrome, it works with Safari. ... I can verify that all files are being compiled and saved correctly, but Chrome is not reading the updated files for some reason. Even in the developer tools, the source map shows the old styles. The only way I could get it to work was to change to server location, (from 3000 to something else), and I had to do this for every change in the stylesheet.

Mohamed Hak
Mohamed Hak
17,195 Points

You need to hard reload the page, my guess it is because of cache. you do hard reload with CMD + SHIFT + R good luck

Neil McPartlin
Neil McPartlin
14,662 Points

Just adding to Corey's and Mohamed's findings, I've just been Googling about this and it is a big subject, but in a nutshell, it is desirable that browsers specifically cache CSS files as it means for the 2nd and subsequent site visits, the browser loads faster. To help with this, CSS files can have expiry dates embedded in them apparently.

I'm a PC user and with Chrome I must use CTRL+ SHIFT + R whereas with Firefox, CTRL + R works fine. Here is just one guy reviewing his options. A browser addon seems to be an option. I have tried his 'Disable Cache (While DevTools in Open) idea and that works fine.

http://www.netwebbing.com/force-css-reload/

2 Answers

I was having the same problem. A hard reload works (ctrl + shift + r) or simply reload with the Chrome Developer Tools window open.

Finley Williamson
Finley Williamson
11,375 Points

Another solution for chrome is right-clicking the reload button in the browser (with DevTools open), and selecting "Empty Cache and Hard Reload"