Browser-sync: Resource interpreted as Stylesheet but transferred with MIME type text/html

[ilianaza]

I have a gulp task setup in my gulpfile.js to watch and process SASS files on update:

gulp.task('sass', function () {
  return gulp.src(paths.sass)
  .pipe(plumber())
  .pipe(using({ prefix: 'After changed:' }))
  .pipe(sourcemaps.init())
  .pipe(sass())
  .pipe(changed(paths.dirs.build))
  .pipe(sourcemaps.write('.', { sourceRoot: '/' }))
  .pipe(gulp.dest(paths.dirs.build))
  .pipe(grep('**/*.css', { read: false, dot: true }))
  .pipe(browserSync.reload({stream:true}));
});

When I update any SASS file in my app the stylesheet changes don't get displayed in a browser and I see the following message in log:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8000/states/global.css?rel=1428090355498".

Have you guys encountered this problem before? Any help would be highly appreciated!

[shakyShane]

Can we see the entire gulpfile? or at least more info on your server setup.

That error indicates your backend is not setting headers correctly for css files

[ilianaza]

Yes, you're right. I didn't provide enough info. I just figured it out so and here's the solution:

I have the HTML5 Angular app with the following BrowserSync setup in gulpfile.js:

gulp.task('ws', function(cb) {
  browserSync({
    server: {
      baseDir: paths.dirs.build,
      middleware: [
        modRewrite([
          '!\\.\\w+$ /index.html [L]'
        ])
      ]
    },
    port: 8000,
    notify: false,
    open: false
  }, cb);
});

The problem was with my modRewrite rule. Thanks to @andreicojea for the answer. I've changed it to the following and it's working like a charm now:

gulp.task('ws', function(cb) {
  browserSync({
    server: {
      baseDir: paths.dirs.build,
      middleware: [
        modRewrite([
          '^[^\\.]*$ /index.html [L]'
        ])
      ]
    },
    port: 8000,
    notify: false,
    open: false
  }, cb);
});

[shakyShane]

Excellent :)

[brunowego]

Thanks @ilianaza and @andreicojea :+1: