CODEWITHSUNDEEP
sassgulpgulp-watchgulp-sass
Whisher
Whisher

Reputation: 32716

Gulp sass watch Missing property value with *.scss

My goal is to watch all my scss files

with the code below all it's ok if my

config.paths.src.styles is set like

/styles/app.scss

but when I change it to

/styles/*.scss

I've got like

Error: _theme.scss:13:20: Missing property value

The problem come out when I use @extend .container; not normal css.

Gulp task style.js

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload      = browserSync.reload;
var gulpif = require('gulp-if');
var rename = require('gulp-rename');
var csso = require('gulp-csso');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-ruby-sass');

function handleError(err) {
  console.log(err.toString());
  this.emit('end');
}

var sassOptions = { // The options to be passed to sass()
    style: 'expanded', 
    'sourcemap=none': true 
};

//https://github.com/jgoux/generator-angulpify/issues/19
module.exports = gulp.task('styles', function () {
  return gulp.src(config.paths.src.styles)
    .pipe(autoprefixer('last 1 version'))
    .pipe(gulpif(release, csso()))
    .pipe(gulpif(release, sass(sassOptions).on('error', handleError), sass(sassOptions).on('error', handleError)))
    .pipe(rename(config.filenames.styles))
    .pipe(gulpif(release, gulp.dest(config.paths.dest.phonegap.styles), gulp.dest(config.paths.dest.build.styles) ))
    .pipe(gulpif(!release,reload({stream:true})));
});

watch.js

'use strict';

var gulp = require('gulp');


module.exports = gulp.task('watch', function() {
    var stylesWatcher = gulp.watch(config.paths.src.styles, ['styles']);
    stylesWatcher.on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks styles');
    });
});

app.scss

@import "variables";
@import "imports";
@import "theme";

_theme.js

.morra-sub-header{
  @include clearfix;
  @extend .container;
}

You can give a look at the whole gulp set up

https://github.com/whisher/angular-bootstrap-cordova-seed/tree/master/gulp

END UP

You should use app.scss in the style task

and *.scss in the watch task (silly me :) )

mainStyles: SRC_FOLDER + '/styles/app.scss',
styles: SRC_FOLDER + '/styles/*.scss',
module.exports = gulp.task('styles', function () {
  return gulp.src(config.paths.src.mainStyles)
    .pipe(autoprefixer('last 1 version'))
    .pipe(gulpif(release, csso()))
    .pipe(gulpif(release, sass(sassOptions).on('error', handleError), sass(sassOptions).on('error', handleError)))
    .pipe(rename(config.filenames.styles))
    .pipe(gulpif(release, gulp.dest(config.paths.dest.phonegap.styles), gulp.dest(config.paths.dest.build.styles) ))
    .pipe(gulpif(!release,reload({stream:true})));
});
module.exports = gulp.task('watch', function() {
    var stylesWatcher = gulp.watch(config.paths.src.styles, ['styles']);
    stylesWatcher.on('change', function(event) {
        console.log('File ' + event.path + ' was ' + event.type + ', running tasks styles');
    });
});

Upvotes: 2

Views: 836

Answers (1)

Preview
Preview

Reputation: 35796

The issue here is that your *.scss glob takes everything with no special order. So the _theme.scss file could be picked first, and because it's using variables from the _imports.scss one that's not processed yet, you've got the error.

To prevent this, you could use an array specific pattern to specifically load _imports.scss first.

config.paths.src.styles = [
  '_imports.scss',
  '*.scss'
];

Even though I don't know why you want to also pipe your partials, the imports from the app.scss should be good.

Upvotes: 1

Related Questions