Importing Sass through npm

Question

Currently in our Sass files we have something like the following:

@import \"../../node_modules/some-module/sass/app\";

This is bad, because

Answer 1

As Oncle Tom mentioned, the new version of Sass has this new importer option, where every "import" you do on your Sass file will go first through this method. That means that you can then modify the actual url of this method.

I've used require.resolve to locate the actual module entry file.
Have a look at my gulp task and see if it helps you:

'use strict';

var path       = require('path'),
    gulp       = require('gulp'),
    sass       = require('gulp-sass');

var aliases = {};

/**
 * Will look for .scss|sass files inside the node_modules folder
 */
function npmModule(url, file, done) {
  // check if the path was already found and cached
  if(aliases[url]) {
    return done({ file:aliases[url] });
  }

  // look for modules installed through npm
  try {
    var newPath = path.relative('./css', require.resolve(url));
    aliases[url] = newPath; // cache this request
    return done({ file:newPath });
  } catch(e) {
    // if your module could not be found, just return the original url
    aliases[url] = url;
    return done({ file:url });
  }
}

gulp.task("style", function() {
  return gulp.src('./css/app.scss')
    .pipe(sass({ importer:npmModule }))
    .pipe(gulp.dest('./css'));
});

Now let's say you installed inuit-normalize using node. You can simply "require" it on your Sass file:

@import "inuit-normalize";

I hope that helps you and others. Because adding relative paths is always a pain in the ass :)