names in Module mode

[haustraliaer]

The module mode local scope is amazing, but is there any way to name the classes other than picking up the file name of the import?

eg, given:

MyComponent /
   index.css
   index.js

/* index.css */
.root {
  /* styles */
}

// index.js
var styles = require('./index.css')

// react stuff etc..
return <div className={styles.root} />

will output to:

<div className="index__root__eofhi28o2"></div>

... And so will every other module I have (sans the hash appened) becase I like to keep my component folders named and my filenames generic.

So the desired result given the folder/files above would be:

<div className="MyComponent__root__eofhi28o2"></div>

Edited: for clarity

[haustraliaer]

Found the place it seemed logical to do this and made a PR ^^

Feel free to suggest an alternative - my problem is specific to css-loader, so perhaps updatign the loader-utils module isn't necessarily the right thing? Although I'm sure this would be useful for other things too.

[joshwiens]

@haustraliaer - It looks like you fixed your own issue? If that is the case and this is no longer a problem, could you please close the issue?

Thanks for the PR btw :)

[michael-ciniawsky]

@haustraliaer if there should be any regressions please feel free to reopen, closing for now as it seems to be fixed 😛

[haustraliaer]

Yep was sorted in webpack/loader-utils#27 - thanks, works a treat!