1

I have a gulp watch task, which compiles and concats all scss files to one css file. In my index I link the css file like this:

<link rel="stylesheet" type="text/css" href="./css/styles.css">

This is my gulp watch task:

gulp.task('watch', ['browserSync', 'sass'], function () {
    gulp.watch('app/scss/**/*.scss', ['sass']);
    // Reloads the browser whenever HTML or JS files change
    gulp.watch('app/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
});

And this is my gulp file with the sass task:

gulp.task('sass', function () {
    return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss
        .pipe(sass())
        .pipe(concat('styles.css'))
        .pipe(gulp.dest('app/css/'))
        .pipe(browserSync.reload({
            stream: true
        }))
});

After I start the gulp watch task, my browser opens my site but the style is wrong. I got this error: Refused to apply style from 'http://localhost:3000/css/styles.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Here's the whole gulpfile.js:

//My Gulpfile
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var dev = require('gulp-dev');


gulp.task('sass', function () {
return gulp.src('app/scss/**/*.scss') // Gets all files ending with .scss in 
app/scss
    .pipe(sass())
    .pipe(concat('styles.css'))
    .pipe(gulp.dest('app/css/'))
    .pipe(browserSync.reload({
        stream: true
    }))
});

gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/**/*.scss', ['sass']);
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
});

gulp.task('browserSync', function () {
browserSync.init({
    server: {
        baseDir: 'app'
    },
   })
 });

 gulp.task('dev', function() {
  gulp.src('index.html')
    .pipe(dev(true))
    .pipe(gulp.dest('index.html'));
 });

I don't know why this happens, I'm using the type="text/css" attribute in my link like described in this solution: "The stylesheet was not loaded because its MIME type, "text/html" is not "text/css"

After starting the gulp watch task I have to make a change in one of my scss files and than the whole style is correct? Any ideas what I'm doint wrong?

Danijel Malinovic
  • 121
  • 9

1 Answers1

-1

You need to use this:

<link rel="stylesheet" type="text/css" href="./app/css/styles.css">

I change href="./css/styles.css" to href="./app/css/styles.css". You can also change type="text/css" to type="text/html" - however this solution in low satisfyable

UPDATE In your gulp-file you have line

.pipe(gulp.dest('app/css/'))

This mean that processed files are stored in ./app/css directory, so probably your webserwer dont see it (maybe this files must by stored do different directory like ./public/css - it depends of your project.

Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345