Use glob includes in sass
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
test
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
.travis.yml
README.md
package-lock.json
package.json

README.md

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