Drupal will not refresh appearance in Chrome or Firefox

Question

I have a compass watch running on my Drupal theme, (via localhost build) In Drupal Performance I have aggregate CSS unticked in Bandwidth Optimization options. If I make scss changes, the css files update correctly, and when clicking refresh the Firefox appearance changes as per what I would expect. But in Chrome and Safari they simply will not update appearance until I "Clear all caches" in Drupal. I've emptied history, and in Chrome chosen "Empty cache and hard reload" but that does not change it either, I still have to clear all caches from inside Drupal before Chrome or Safari will update. Is there any way to get around this?

Answer 1

Two ways:

1. Disable ALL Drupal caches, source:

[...] use the Devel module to rebuild your theme's registry on every page reload. Once installed, go to Configuration → Development → Devel settings. There, check "Rebuild the theme registry on every page load" and press the "Save configuration" button. Remember to uncheck it (or better yet, disable Devel entirely) when you're done with development.

2. Replace Compass with Gulp and Browsersync to sync your changes without needing to reload the browser.

Install Browsersync and Link CSS and set up CSS compiling with npm (install npm first) and Gulp (install Gulp globally first). Place the following files into your theme's folder. Replace SOMENAME, MYFILE.scss and MYDRUPAL.local. Then run $ npm install and $ gulp. Happy, happy.

package.json

{
    "name": "SOMENAME",
    "private": true,
    "dependencies": {
        "browser-sync": "^2.18.13",
        "eslint": "^4.8.0",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^4.0.0",
        "gulp-cached": "^1.1.1",
        "gulp-sass": "^3.1.0",
        "gulp-sass-lint": "^1.3.4",
        "gulp-shell": "^0.6.3",
        "gulp-sourcemaps": "^2.6.1",
        "rimraf": "^2.6.2"
    },
    "scripts": {
        "postinstall": "node_modules/.bin/rimraf node_modules/**/*.info",
        "build": "gulp build"
    }
}

gulpfile.js

const gulp        = require('gulp'),
      browserSync = require('browser-sync'),
      sass        = require('gulp-sass'),
      prefix      = require('gulp-autoprefixer'),
      shell       = require('gulp-shell'),
      sourcemaps  = require('gulp-sourcemaps'),
      sassLint    = require('gulp-sass-lint'),
      cache       = require('gulp-cached');

// Only include config if exists.
var config;
try {
  config = require('./config.json');
}
catch (error) {
  config = require('./example.config.json');
}

/**
 * Launch the Server
 */
gulp.task('browser-sync', ['sass'], function() {
  browserSync.init({
    // Change as required
    proxy : config.proxy,
    socket: {
      // For local development only use the default Browsersync local URL.
      //domain: 'localhost:3000'
      // For external development (e.g on a mobile or tablet) use an external
      // URL. You will need to update this to whatever BS tells you is the
      // external URL when you run Gulp.
      domain: 'localhost:3000'
    }
  });
});

/**
 * @task sass
 * Compile files from scss
 */
gulp.task('sass', function() {
  return gulp.src('scss/MYFILE.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'})
      .on('error', function(err) {
        console.error(err.message);
        browserSync.notify(err.message, 3000); // Display error in the browser
        this.emit('end'); // Prevent gulp from catching the error and exiting
                          // the watch process
      }))
    .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('css'))
    .pipe(browserSync.reload({stream: true}));
});

/**
 * @task clearcache
 * Clear all caches
 */
gulp.task('clearcache', function() {
  return shell.task([
    'drush -l ' + config.alias + ' cr'
  ]);
});

/**
 * @task reload
 * Refresh the page after clearing cache
 */
gulp.task('reload', ['clearcache'], function() {
  browserSync.reload();
});

/**
 * @task sass-lint
 * Lint only modified files
 */
gulp.task('sass-lint', function() {
  return gulp.src(['scss/*.scss', 'scss/**/*.scss'])
    .pipe(cache('sassLint'))
    .pipe(sassLint())
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
});

/**
 * @task watch
 * Watch scss files for changes & recompile
 * Clear cache when Drupal related files are changed
 */
gulp.task('watch', function() {
  gulp.watch(['scss/*.scss', 'scss/**/*.scss'], ['sass-lint', 'sass']);
  gulp.watch('**/*.{php,inc,info}', ['reload']);
});

/**
 * Default task, running just `gulp` will
 * compile Sass files, launch BrowserSync & watch files.
 */
gulp.task('default', ['browser-sync', 'sass-lint', 'watch']);
gulp.task('build', ['sass']);

config.json

{
    "proxy": "MYDRUPAL.local",
    "alias": "default"
}

---

Number 2 will make you much more happy as it will inject your changes immediately into your site. You could place your editor window and browser window just next to each other and see the magic happen. (My sample also already comes with sass-lint enabled, so it would expect alphabetical order of all properties and proper selector nesting and naming). But when you are in a hurry, go with Number 1.