Have ideas to improve npm?Join in the discussion! »

    gulp-sass-glob

    1.1.0 • Public • Published

    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
    

    Install

    npm i gulp-sass-glob

    DownloadsWeekly Downloads

    23,798

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    27.7 kB

    Total Files

    33

    Last publish

    Collaborators

    • avatar