React NPM Components with CSS?

Siyfion · October 30, 2015, 10:57am

Perhaps this is just me showing my inexperience with React, Browserify, etc. But I am trying to use a react component, in the way suggested by this article: https://react-in-meteor.readthedocs.org/en/latest/client-npm/

Which I believe is still the recommended way to do things?!

However, the package in question "react-select" has both JS and CSS as part of the package. The JS seems to load perfectly fine, but the CSS is seemingly nowhere to be seen. So how exactly does one go about including the CSS into the build? I’m currently using the Meteor Chef react base as a testing ground at the moment, and in the application.scss I’ve tried adding a path to the package’s CSS, eg. @import "../../packages/npm-container/.npm/package/node_modules/react-select/dist/default.css"; but that doesn’t seem to work.

I’ve seen something called npm-css which looks like it might help, but I’m not entirely sure, as it’s not built with Meteor in-mind…

What else am I left with as options?

okada · October 30, 2015, 1:50pm

I dont know if there is a better solution, but I’m copying the css into my package and adding
api.addFiles(‘styles/react-select.css’) to packege.js

michaelcole · October 30, 2015, 4:19pm

On linux, I’d do this by making a symbolic link into the public folder:

cd public
ln -s ../../../../wherever/is/the.css the.css

Because the link is relative, it can be commited to git.

Siyfion · October 30, 2015, 4:21pm

Thanks for the answers guys, and don’t get me wrong, they’ll both work, but my god, I was hoping for a slightly more elegant / “official” way. Is there really nothing more robust?

okada · October 30, 2015, 6:24pm

So react-select declare a field “style: dist/default.css” in package.json. This field seems to be used by certain utilities, like the parcerify plugin for browserify. Since meteor-react is using cosmos:browserify (for now) it may be possible to configure browserify to use parserify to bundle the css for you.

Siyfion · November 2, 2015, 9:25am

This is the kind of solution that I was more on about; it’s just a shame that there’s no guide or official “way” to do it. But thanks for the tips, I’ll take a look at partialify now.

EDIT: I looked for parcerify, but I think you meant partialify.