Setting up Gulp 4 for Bootstrap, SASS, and BrowserSync

Question

Trying to setup Gupl4 and browsersync and I want to have my css file in the assets folder

// my gulpfile:

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();


// compile scss into css
function style() {
  return gulp.src('_frontend/scss/**/*.scss')
    .pipe(sass().on('error',sass.logError))
    .pipe(gulp.dest('../assets/css'))
    .pipe(browserSync.stream());
}

function watch() {
  browserSync.init({
    server: {
      baseDir: "./_frontend",
      index: "/index.html"
    }
   });

  gulp.watch('_frontend/scss/**/*.scss', style)
  gulp.watch('./*.html').on('change',browserSync.reload);
  gulp.watch('./js/**/*.js').on('change', browserSync.reload); 
}

exports.style = style;
exports.watch = watch;



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

I get this error :

Refused to apply style from 'http://localhost:3000/assets/css/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

// this is my folder organization:

 |_frontend
     |-assets
     |-css 
     |-js
     |-scss
        |-styles.scss
     |-index.html
  | assets
     | css
        | style.css
  |-gulpfile.js
  | package-json

Where is the mistake? Can someone explain to me what am I doing wrong?

Mark Mark · Accepted Answer · 2020-02-20T21:06:33

It appears to me that this is what you want:

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

note the small difference from '../ to ./ It is relative to the location of your gulpfile.js which is already at the top level of your folder which you want to remain in hence the current working directory which is ./. But ../ is go up a directory so you go above your _frontend folder which you don't want to do.

Setting up Gulp 4 for Bootstrap, SASS, and BrowserSync

1 Answers