11

I'm trying to get Chrome's DevTools to auto reload a page when I save a watched SCSS file which will compile and make changes to the CSS file.

I have the Auto-reload generated CSS option checked, but sadly, it isn't working as expected. enter image description here

Whenever I make changes to the SCSS file and save it, the page doesn't reload. I have added my working folder to the workspace and also mapped the files (both the SCSS file and the generated CSS) to their respective versions on my local system drive. This, however, doesn't help.

The SASS source maps seems to be working fine as the scss files are reflected in the DevTools inspector:

enter image description here

I'm using Chrome version 31:

enter image description here

Have I missed out anything that I don't know of? What else do I have to do to get this to work?

DaniP
  • 37,813
  • 8
  • 65
  • 74
Carven
  • 14,988
  • 29
  • 118
  • 161

2 Answers2

5

I used drupal in this case and drupal generate css link like 'style.css?abc'. Problem in this suffix '?abc'. You need to start file mapping from LOCAL (press right-click on local) 'style.css' to WEB 'style.css?abc' (shown in list). Not from WEB to LOCAL. If result is correct WEB-links disappears from list in 'resourses' tab.

szdv
  • 59
  • 1
1

here is a good solution, to avoid this mapping issue of .css?201203241721 / .js?201203241721-files as szdv mentioned with drupal. I have had it with typo3 and this solved it:

    /* remove in production *************************************************/
    //filter typo3 temp file src/href with ?date ending for chrome workspaces
    $('script, link').each(function(){
        rpString = /\?[0-9]*/;
        if(this.src){
            this.src = this.src.replace(rpString,'');
        }
        if(this.href){
            this.href = this.href.replace(rpString,'');
        }
    });
    /* ******************** *************************************************/
systrue
  • 89
  • 8
  • sir, I updated my answer. figured the solution/problem had to do with chrome not being able to map files with numbers after .css? (question marks), once they update. This is usually used to have browsers not using cashed files after they have been updated in the cms. Although, turns out for development its good to ether turn it off or remove it with the javascript above. don't use the script in production, since the .css?... is in general a good thing to kill browser cash of updated files. – systrue Mar 24 '14 at 08:27