Allow node-sass importers to be passed in options.

[pmowrer]

This allows for custom importers to be passed in the loader query.

For example, node-sass-json-importer could be enabled like so:

{
  test: /\.scss$/,
  loaders: [
    "style", 
    "css", 
    "sass?" + JSON.stringify({
      importer: require.resolve('node-sass-json-importer')
    });
  ]
}

The above example also resolves #111.

Was hoping to write a test for this, but it seems a bit difficult to fit into the well structured but somewhat rigid test setup. Let me know what you think.

[jhnns]

This could easier been written like:

opt.importer = (opt.importer || [])
    .concat(getWebpackImporter())

[pmowrer]

opt.importer may be a string (to mirror node-sasss importer field which takes a function or array of functions).

[jhnns]

Thx for your PR 👍

I'm definitely planing to merge this, but it would be good if we'd follow the official recommendation for programmable objects in query parameters. The sass-loader should not try to require() the file, but just read it from the webpack config.

This is also related to #152

[pmowrer]

@jhnns Sounds good, thanks for the link (I'm pretty new to Webpack land). I'll make the update soon

[pmowrer]

@jhnns Updated per the docs. Let me know what you think.

[lukasgeiter]

👍 for this!

[jhnns]

Shipped with 3.1.0. New preferred way for passing options is now via a property on your webpack config. See https://github.com/jtangelder/sass-loader#sass-options

[lukasgeiter]

Awesome, thanks!

[lencioni]

Thanks for the work on this. I'm trying to get this set up with node-sass-json-importer and am running into an issue. I'm wondering if someone here can help me out. Here's the configuration I added to my webpack config:

sassLoader: {
  importer: require('node-sass-json-importer'),
}

With this configuration sass-loader seems to have a hard time resolving my @imports that use ~ and I get messages like the following:

ERROR in ./~/css-loader?localIdentName=[path][name]--[local]--[hash:base64:10]!./~/autoprefixer-loader!./~/sass-loader!./app/assets/javascripts/components_loader.js!./app/assets/components/MyComponent/index.scss
Module build failed:
@import '~stylesheets/config';
^
      File to import not found or unreadable: ~stylesheets/config
Parent style sheet: stdin
      in /Users/me/repo/app/assets/components/MyComponent/index.scss (line 1, column 1)
 @ ./app/assets/components/MyComponent/index.scss 4:14-286

I found the bit of code where this is managed in sass-loader and it seems to add the webpack importer so I'm not really sure why this is failing like this. Any thoughts?

[lencioni]

I seem to have the same results with the following configuration, which from what I can tell shouldn't really do much of anything:

sassLoader: {
  importer: (url) => ({ file: url })
},

I also tried this, which seemed to work fine:

sassLoader: {
  importer: (_, __, done) => done()
},

Do you suppose there might be something else that's odd about my config?

[jhnns]

Acccording to the node-sass docs, you should return sass.NULL if your custom importer doesn't want to handle the file. This passes the file request on to the next importer in the array.

[jhnns]

If you don't return sass.NULL in cases you don't want to resolve the file, all webpack specific resolving won't be applied.

[lencioni]

Ah, thanks! It seems that this might be a bug in node-sass-json-importer then (https://github.com/Updater/node-sass-json-importer/blob/f203f2244d157ccce88194d31740d3b54e39128f/src/index.js#L24-L26). I'll move the discussion over there.