Gulp task to use glob imports in your sass/scss files.
npm install gulp-sass-glob
 
Gulp plugin for gulp-sass to use glob imports.
``
npm install gulp-sass-glob --save-dev
main.scss
`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
`javascript
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'));
});
`
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'));
});
gulp-sass-glob currently does NOT support nested glob imports i.e.
main.scss
`scss`
@import 'blocks/*/.scss';
blocks/index.scss
`scss`
@import 'other/blocks/*/.scss';
This will throw an error, because gulp-sass-glob does NOT read nested import structures.
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 -> ONLY in this file I use glob imports
Problem solved.
npm test
Build dist
npm run compile