Search code examples
node.jsreactjspostcssdraftjsisomorphic-style-loader

How can I configure isomorphic-style-loader to load a node module?


I'm trying to use the react-draft-wysiwyg module, but the imported styles associated with the module aren't being utilized. I think this is due to the imported css being loaded into a hash whereas the class attributes of the elements in the module are not.

That being the case, can I either:

  • Convert the classes in react-draft-wysiwyg to hashes class names, or
  • Have the style loader ignore the react-draft-wysiwyg css file?

Some of the things I've tried include:

  • import draftcss from 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'; ... export default withStyles(s, draftcss)(Layout);

  • Inside the main imported css file: @import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

  • Importing react-draft-wysiwyg.css from the parent route's index.js file

Solution

  • There is an issue raised in Github about this problem.

    The only solution stated there that worked is to copy all css content of the plugin to an local .css file and import into main css file.

    You can find css content of the plugin in node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css