Consider adding node-sass-tilde-importer

[seothemes]

Adding a tilde importer allows shorter URLs when importing files from node_modules. Gulp doesn't provide this by default.

Expected Behavior

@import "~normalize-css/normalize";

Current Behavior

@import "../../../node_modules/normalize-css/normalize";

Possible Solution

Add node-sass-tilde-importer - https://www.npmjs.com/package/node-sass-tilde-importer

Steps to Reproduce

1. Require the package:

tilde = require( 'node-sass-tilde-importer'),

2. Add the importer in the css task:

.pipe(sass.sync({
  outputStyle: outputConfig.outputStyle,
  includePaths: [].concat(normalize),
  importer: tilde
}))

Context

This makes it a lot easier to import scss or js files from node_modules. Especially in deeper nested folder structures.

Your Environment

• Version used: Latest
• Node version: 9.10.1
• NPM version: 5.6.0

[craigsimps]

Normalize 8.0.0 is already bundled with Gulp WP Toolkit.

So all you need to use is:

@import "normalize";

And it'll be included in the CSS build task automatically.

[seothemes]

The normalize.css was just an example but good to know it’s included.

I’m currently rebuilding my starter theme’s Sass and have started splitting up certain styles into node packages e.g https://www.npmjs.com/package/genesis-column-classes. I’m also importing bourbon, neat and a few other things from node_modules.

It’s definitely not essential, just cleans up Sass files a bit.