gulp-sass-glob-2
v1.0.9 gulp sass glob gulpplugin
About gulp-sass-glob-2
This package is deprecated. Please use instead the original package: gulp-sass-glob.
Overview
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'));
});
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
- ViliamKopecky for fixing base path
- gulp-sass-glob-import for inspiration for unit tests etc.
- Parhumm for fixing windows bug in import files
- Mjezzi for fixing single quotes bug
- Daviestar for fixing re-including main file bug, recursion bug, sass-not-scss bug
- Nirazul for reporting the comment glob bug
- CREEATION for submitting a regex for comment globs
npm i gulp-sass-glob-2
Metadata
- MIT
- Whatever
- Mike Vercoelen
- released 12/9/2016