Skip to content

mikevercoelen/gulp-sass-glob

Repository files navigation

Package Quality

Package Quality Build Status

gulp-sass-glob

Gulp plugin for gulp-sass to use glob imports.

Install

npm install gulp-sass-glob --save-dev

Basic Usage

main.scss

@import "vars/**/*.scss";
@import "mixins/**/*.scss";
@import "generic/**/*.scss";
@import "../components/**/*.scss";
@import "../views/**/*.scss";
@import "../views/**/*something.scss";
@import "../views/**/all.scss";

NOTE: Also support using ' (single quotes) for example: @import 'vars/**/*.scss';

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassGlob = require('gulp-sass-glob');

gulp.task('styles', function () {
    return gulp
        .src('src/styles/main.scss')
        .pipe(sassGlob())
        .pipe(sass())
        .pipe(gulp.dest('dist/styles'));
});

Ignoring files and directories by pattern

You can optionally provide an array of paths to be ignored. Any files and directories that match any of these glob patterns are skipped.

gulp.task('styles', function () {
    return gulp
        .src('src/styles/main.scss')
          .pipe(sassGlob({
              ignorePaths: [
                  '**/_f1.scss',
                  'recursive/*.scss',
                  'import/**'
              ]
          }))
        .pipe(sass())
        .pipe(gulp.dest('dist/styles'));
});

Troubleshooting

Nested glob imports

gulp-sass-glob currently does NOT support nested glob imports i.e.

main.scss

@import 'blocks/**/*.scss';

blocks/index.scss

@import 'other/blocks/**/*.scss';

This will throw an error, because gulp-sass-glob does NOT read nested import structures.

Solving nested glob imports

You have to think diffrent about your sass folder structure, what I suggest to do is:

  • Point your gulp styles task ONLY to main.scss
  • In main.scss -> ONLY in this file I use glob imports

Problem solved.

Thanks and love

Contribute

Run tests

npm test

Build dist

npm run compile