Skip to content
Use glob includes in sass
JavaScript CSS
Branch: master
Clone or download
Latest commit 255ee04 Jul 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Clean up Jul 2, 2019
src Clean up Jul 2, 2019
test Added SafeBuffer, mocha new use new require syntax Apr 5, 2018
.babelrc Updated deps, moved to babel-preset-env, version bump, added package.… Apr 5, 2018
.eslintignore
.eslintrc
.gitignore fix issue #28 Oct 6, 2016
.npmignore started working on the rewrite Feb 27, 2016
.travis.yml add tests Oct 6, 2016
README.md Updated deps, moved to babel-preset-env, version bump, added package.… Apr 5, 2018
package-lock.json Clean up Jul 2, 2019
package.json Clean up Jul 2, 2019

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
You can’t perform that action at this time.