Bulk Import Your SCSS Partials using Gulp WP Toolkit

When building a WordPress theme with SCSS I like to split up my code into a series of folders and partials, following a logical structure. A useful feature of Gulp WP Toolkit is the ability to easily load all of the SCSS partials within a folder.

This is made possible by the gulp-sass-bulk-import package.

Your original SCSS file might look like this:

	//----------------------------
	// Base
	//----------------------------

	@import "base/accessibility";
	@import "base/buttons";
	@import "base/forms";
	@import "base/headings";
	@import "base/layout";
	@import "base/lists";
	@import "base/media";
	@import "base/tables";
	@import "base/typography";
	@import "base/wordpress";

view raw style.scss hosted with ❤ by GitHub

But using Gulp WP Toolkit, it can be rewritten as:

	//----------------------------
	// Base
	//----------------------------

	@import "base/*";

view raw style.scss hosted with ❤ by GitHub

If you need to load a specific file first, then you can do so by adding an @import statement before the wildcard @import, like this:

	//----------------------------
	// Base
	//----------------------------

	@import "base/typography";
	@import "base/*";

view raw style.scss hosted with ❤ by GitHub

Bulk Import Your SCSS Partials using Gulp WP Toolkit

Leave a Reply Cancel reply