Browsersync change CSS changes lost if I change pages until I refresh.

[acha5066]

I have got Browsersync working well. The CSS changes are injecting, however if I click on a link and go to a new page on my site all those CSS changes that were injected seem to be lost. If I refresh, those changes immediately come back. Is this expected behaviour? If not is my grunt configuration incorrect?

I'm using this in conjunction with Drupal and the link_css module to change css @import tags to <link> tags as browsersync will not work with @import tags. See #117 for more info on this issue.

// Browsersync requires <link> tags for CSS. By default Drupal uses @import tags for CSS which
// doesn't work with Browsersync. Installing the link_css module will convert @import tags to <link> tags and get it working for yo

module.exports = function(grunt) {

  // Init config.
  grunt.initConfig({

    // Register package.
    pkg: grunt.file.readJSON('package.json'),

    // Watch.
    watch: {
      sass: {
        files: ['assets/sass/**/*.scss'],
        tasks: ['sass_globbing', 'sass:production']
      },
      css: {
        files: ['assets/css/**/*.css']
      }
    },

    // Globbing.s
    sass_globbing: {
      import_maps: {
        files: {
          'assets/sass/imports/_components.scss': 'assets/sass/components/**/*.scss',
          'assets/sass/imports/_mixins.scss': 'assets/sass/abstractions/mixins/**/*.scss',
          'assets/sass/imports/_placeholders.scss': 'assets/sass/abstractions/placeholders/**/*.scss',
          'assets/sass/imports/_base.scss': 'assets/sass/base/**/*.scss'
        }
      }
    },

    // Sass.
    sass: {
      options: {
        includePaths: [
          'bower_components/susy/sass',
          'bower_components/sassy-maps/sass',
          'bower_components/compass-mixins/lib',
          'bower_components/sass-toolkit/stylesheets',
          'bower_components/normalize-scss',
          'bower_components/compass-breakpoint/stylesheets',
          'bower_components/type-heading/stylesheets'
        ]
      },
      production: {
        sourceMap: true,
        outputStyle: 'extended',
        files: {
          'assets/css/dg-base-theme.styles.css': 'assets/sass/dg-base-theme.styles.scss',
          'assets/css/dg-base-theme.print.styles.css': 'assets/sass/dg-base-theme.print.styles.scss',
          'assets/css/dg-base-theme.hacks.css': 'assets/sass/dg-base-theme.hacks.scss',
          'assets/css/dg-base-theme.dg-base-theme.normalize.css': 'assets/sass/dg-base-theme.dg-base-theme.normalize.scss',
          'assets/css/dg-base-theme.no-query.css': 'assets/sass/dg-base-theme.no-query.scss',
          'assets/css/layouts/dg_base_theme/dg-base-theme.layout.css': 'assets/sass/layouts/dg_base_theme/dg-base-theme.layout.scss',
        }
      }
    },

    // Bowercopy
    bowercopy: {
      options: {
        destPrefix: 'libraries'
      },
      glob: {
        files: {
          'html5shiv': 'html5shiv/*.js',
          'respond': 'respond/*.js',
          'selectivizr': 'selectivizr/*.js',
          'matchmedia': 'matchmedia/*.js',
          'pie': 'pie/*.js',
          'colorbox': 'colorbox/*.js',
          'cycle2': 'jquery-cycle2/build/**/*.js',
          'fitvids': 'fitvids/*.js'
        }
      }
    },

    // Notify.
    notify: {
      css: {
        options: {
          title: 'CSS:',
          message: 'CSS has changed.'
        }
      }
    },

    //browserSync
    browserSync: {
      dev: {
        bsFiles: {
          src : 'assets/css/*.css'
        },
        options: {
          proxy: "dgcms.dev", // update this to your url
          watchTask: true
        }
      }
    }

});

  // Load modules.
  grunt.loadNpmTasks('grunt-notify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-sass');
  grunt.loadNpmTasks('grunt-sass-globbing');
  grunt.loadNpmTasks('grunt-bowercopy');
  grunt.loadNpmTasks('grunt-browser-sync');

  // Register tasks.
  //grunt.registerTask('default', ['bs-init', 'watch']);
  grunt.registerTask('default', ['browserSync', 'watch']);

};

[jamesryan-dev]

I am using gulp and having same issue - did you ever find a solution?