gulp-sass-import

Define a default file to @import from a directory path. Incredibly useful for modular sass frameworks, where each module may have a collection of files.

Rather than call each file into the root sass file, we can import a default file from the directory instead, which itself references its sibling files in the module.

- main.scss
	| module1
		- _index.scss
		- _module.scss
		- _mixins.scss
		- _extends.scss
	| module2
		- _index.scss
		- _module.scss
		- _mixins.scss
		- _extends.scss

Here, we can import each _index.scss into main.scss, then call the sibling files from _index.scss, e.g ./module.scss.

Gulp-sass-import helps define a placeholder in the import path to make things clearer.

// main.scss
@import '/module1/_index';
@import '/module2/_index';

// becomes
@import '/module1/';
@import '/module2/';

The trailing / indicates that this import is calling a directory.

Options

Accepts options for customising placeholder and default filename in sub-directory.

Filename

The default filename to look for, defaults to _index.

Marker

The sub-directory marker in the import path, defaults to /.

Example

var sassImport 	= require('gulp-sass-import'),
	sass 		= require('gulp-sass'),
    rename 		= require('gulp-rename');

gulp.task('sass', function()
{
	gulp.src('./style.scss'),   
		.pipe(sassImport({
			filename : '_file',
			marker : '/*'
		}))
		.pipe(sass())
		.pipe(rename('style.css'))
		.pipe(gulp.dest(./));
});

gulp.task('default', ['sass']);