Loading JSON files with sass-loader

[lencioni]

I've been using the sass-json-vars project to import some configuration that I have shared between JS and Sass. This works by converting the JSON to Sass maps.

I'm trying to switch from the Sass gem to sass-loader and haven't found an easy way to preserve this feature. Do you have any suggestions for how to load JSON files in Sass with sass-loader?

[jhnns]

That's a nice feature I was also already thinking about.

This should be doable with node-sass' custom importer. The sass-loader is already using it to plug-in webpack's file resolver. Acoording to node-sass' README, you can also specify an array of functions for importer.

You could try to prepend a JSON custom importer, which generates a SASS map if encounters a JSON-file. In all the other cases, it should return sass.NULL (according to node-sass' README). If you're successful, we can change the sass-loader so that anyone can prepend own custom importers (currently, importer would just be overwritten).

[lencioni]

Thanks for the response, that sounds like a reasonable plan. However, for now I just decided to go with json-sass which requires an extra step to generate the Sass, but works for now. Ideally this would happen automatically in the loader, but I won't be able to give it the time or attention it deserves for a while.

[AlanFoster]

👍 This would be a nice feature to make use of

[pmowrer]

The node-sass importer you need is here: https://github.com/Updater/node-sass-json-importer

I'm just getting started with sass-loader, but unless I'm mistaken it looks like it currently doesn't support custom importers. Should be a simple fix though. I'll probably put together a PR.

[esr360]

How can we tell webpack to re-compile Sass when we make changes to JSON when using a custom importer?