search

shakyShane / jekyll-gulp-sass-browser-sync

A starter project including full setup for Jekyll, GulpJS, SASS & BrowserSync
728 stars 169 forks source link

CSS/SASS doesn't automatically get applied after running gulp. #57

Open mariacheline opened 7 years ago

mariacheline commented 7 years ago

Whenever I (re)run gulp, css doesn't automatically get applied. Hitting save solves it but still, it would be great if it's automatic.

Sandstedt commented 7 years ago

I maybe had a similar problem when the css didnt get updated when saving a sass file in a subfolder (eg _scss/components/_buttons.scss).

Appearently the watch does only run sass in the root scss directory. So adding this line will runt the sass script also in subfolders:

gulp.watch('_scss/**/*.scss', ['sass']);

Complete watch function:

/**
 * Watch scss files for changes & recompile
 * Watch html/md files, run jekyll & reload BrowserSync
 */
gulp.task('watch', function () {
    gulp.watch('_scss/*.scss', ['sass']);
    gulp.watch('_scss/**/*.scss', ['sass']);
    gulp.watch(['*.html', '*.md', '_layouts/*.html', '_case/*', '_curious-about/*', '_includes/**/**', 'js/**', '_scss/**'], ['jekyll-rebuild']);
});
jhoedram commented 6 years ago

I have the same problem. browsersync does not inject the css correctly, what could be happening ?, I applied the command:

browser-sync start --proxy localhost/simple-grid --files "./*.*"

So far, it detects all types of .html .php .js file, but when compiling from .scss to .css it does not do anything. As you can see I have 2 consoles, 1 executes gulp (to compile sass) and the other (browser-sync).

I appreciate your help in advance.

problema1