Scss/Sass Multiple Sites in Multiple Directories

SCSS/SASS Multiple Sites in Multiple Directories

#!/bin/bash
for i in repoa repob repoc repod
  do
    compass watch "$i/pathtoyourconfig.rb" &
done

sass watching multiple directories

I'm hoping you've already tried it, but you can just add all folders into one command line:

sass --watch path/to/sass1:path/to/css1 path/to/sass2:path/to/css2 path/to/sass3:path/to/css3

Iterate through multiple folders to compile all SASS to CSS in Gulp

You can't put a globstar ** in your destination directory like this:

var output = './**/css';

That won't work, because gulp.dest() can't magically guess from context which directory you want your files to end up in.

You have to explicitly construct a destination directory for each folder returned from getFolders(), just as you do for gulp.src():

var tasks = folders.map(function(folder) {
  var src = path.join(scriptsPath, folder, 'scss');
  var dst = path.join(scriptsPath, folder, 'css');
  return gulp.src(path.join(src, '**/*.scss'))
    .pipe(sourcemaps.init())
    .pipe(sass(sassOptions).on('error', sass.logError))
    .pipe(postcss(processors))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest(dst));
});

Watch multiple directories using gulp-sass

You need to provide the relative path to the sass files that you're importing. So change the import code to be something like this:

@import "forms";
@import "../../common/styles/_mixins";
@import "../../common/styles/_common";

Then, since you are importing the files from ./common/styles you should only need gulp to target the scss file in ./blog/styles. So your gulp function could look something like this:

gulp.task('sass', function() {
    gulp.src('./blog/styles/blog.scss')
        .pipe(sass())
        .pipe(gulp.dest('./dist/style.css'));
});

---

Related Topics