React Components with CSS in meteor

#1

Hello Everybody!

In my team we are building a set of React components as NPM packages outside Meteor. They don’t use inline styling.
Now, everytime we want to use the components we have to do the following imports:

import MyComponent from 'my-component-package';
import 'my-component-package/MyComponent.css

Do we have to import the bundled CSS everywhere?

I know that if the component is written in Meteor, you can just import the css from the component file itself. But if the component it’s coming from an outside library… I’m not sure how to do it

Is there any other way to do it?

@robfallows @benjamn @sashko

I’d appreciate some help here :smile:

#2

i would like to know that too!

#3

If you place the style import in client/somefile.js it should apply globally, so you will only have to import it once.

#4

That works only if the component is defined inside Meteor. But if it’s an NPM package (bundled with any bundler (gulp in our case, we don’t need webpack for anything), then it will output a js and a css file.
In that case we don’t find any other way but importing it from the template.

#5

In my client/main.js I have this: import "../node_modules/react-resizable/css/styles.css";

It imports from an npm module, tried this?