Use proper hook for SASS loader.

[izaakschroeder]

This changes a lot of stuff and the tests need to be updated to match. This builds a small project I have going right now but I haven't tested it majorly on anything else. Someone should look into it.

[izaakschroeder]

This is a good start on #31 and #50.

[saki7]

👍

[jhnns]

Sorry for not answering this.

First of all: Thank you for work. I appreciate every contribution. Unfortunately this PR looks a bit over-complicated to me. Imho you're using too much internal stuff which can then break easily when @sokra changes something.

We can take the less-loader as blueprint since it already has this feature for quite some time. The important code is here. We can let webpack/enhanced-resolve do the resolving by calling

// loaderContext is `this` inside the loader
loaderContext.resolve(context, moduleRequest, cb)

Take also a look at the loader api.

I'll publish a branch which contains the refactoring for node-sass@2.0.0

[izaakschroeder]

@jhnns A lot of this was indeed lifted from less-loader. However, one thing less-loader is missing (and this is not) is the ability to use module urls in imports.

@import "foo!/something";

The above is otherwise not possible.

Also, loaderContext.resolve has its own set of problems which I struggled at before arriving at the current solution (in particular only one context is allowed and imports require more than one: root directory + "current directory" which is exposed really poorly in node-sass). The custom resolver is pretty much ripped from the webpack config loader.

If you don't want to merge this please close the branch and I'll maintain a fork myself, as I need the module loading capability.

[jhnns]

Oh, ok... didn't know that you already tried the less-loader approach.

@izaakschroeder what do you mean by "module urls"? Inlined loaders?
@sokra is that true? Does loaderContext.resolve not apply inline loaders?

I don't know what you mean by "root directory", but the described behavior should be done with loaderUtils.urlToRequest(url)

[izaakschroeder]

@jhnns the module loader allows you to do stupid things like @import "css!less!foo"; where you can get a module to go through a precompile phase before being passed into node-sass. I use it for generating icon fonts, though I have not yet published the module. I could have sworn I tried every other approach, but they don't accept the "foo!bar" style.

How do you specify multiple paths to be searched? This approach allows you to feed the resolver multiple base paths and it will go through them in order, since SASS convention has no concept of "./foo" vs "foo" both have to be tried.

[jhnns]

Check out this chapter of loader-utils.

The ~-prefix points to module directories. This should be consistent across all loaders where the import/require syntax doesn't differentiate between local and module directories. The css-loader and less-loader are already using it.

[jhnns]

I've implemented the custom importer with the less-loader approach.

Anyway, thanks for your suggestions 👍