Produce JSON file(s) with class mappings

[andersekdahl]

Hi,
I'm looking to use the local class names from outside of Javascript (in Razor templates on the server). In order to do that, I need to produce one or more JSON files which contains the original file names and their class mappings.

Could someone lead me in the right direction for doing this? That is, produce a file looking something like this:

{"folder/file1.scss": {
  "class1": "hcgvx657hv67",
  "class2": "uh3hj573"
}, "file2.scss": { 
  ... 
}}

[sokra]

The css-loader/locals does this. It only exports a mappings object for i. e. server side rendering. This way you can compile a webpack bundle which contains only the mappings.

var context = require.context(".", true, /\.scss$/);
var obj = context.keys().reduce(function(obj, key) {
  obj[key] = context(key);
  return obj;
}, {});
obj // {"./folder/file1.scss": { "class1": ...

test: /\.scss$/,
loader: "css-loader/locals!scss-loader"

[andersekdahl]

Just the help I needed, thank you!

[andersekdahl]

Just wanted to let you know that I've created a loader that fits my needs: https://www.npmjs.com/package/extract-css-module-classnames-loader

It doesn't use css-loader/locals but it uses css-loader/lib/processCss to extract the class names and write them to a JSON file during build.

[frenic]

+1