4

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
AstroBoogie
  • 498
  • 5
  • 17
  • Have u tried this? https://github.com/webpack-contrib/css-loader – Sudheer Jan 04 '18 at 10:56
  • @Sudheer I have css-loader and it's affecting all my css files. I'm not sure how to either exempt one of the files from css-loader or have the node module I'm using look for the new class names. – AstroBoogie Jan 05 '18 at 02:48

1 Answers1

4

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

sudo bangbang
  • 27,127
  • 11
  • 75
  • 77
  • @AstroBoogie, I see that you've commented on the issue on GitHub. I just wanted to make sure that you've tried this as well. It was not quite clear from the question. – sudo bangbang Jan 03 '18 at 20:50
  • I've tried this without any success. I think even though the local .css is being imported, it's still being hashed by css-loader. – AstroBoogie Jan 04 '18 at 04:24