Gulp sass watch Missing property value with *.scss - sass

Question

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');
});
});

Answer 1

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.