Sass Watching Multiple Directories

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

how to watch changes in whole directory/folder containing many sass files

Simply use the command sass --watch <input folder>:<output folder>, like this:

$ ls -l
css/ sass/
$ sass --watch sass:css

Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.

how to watch changes in whole directory/folder containing many sass files

Simply use the command sass --watch <input folder>:<output folder>, like this:

$ ls -l
css/ sass/
$ sass --watch sass:css

Where <input folder> contains the Sass files and <output folder> that hosts the generated CSS files.

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