DEV Community

loading...

Discussion on: Monorepos: Lerna, TypeScript, CRA and Storybook combined

Collapse
anil1712 profile image
Anil Kumar Pandey • Edited

Hi @shnyder,

The component CSS files are not getting copied from my-monorepo-ui-lib to my-monorepo-cra-app. So I am getting this error.

../my-monorepo-ui-lib/lib-esm/components/card/card.js
Module not found: Can't resolve './card.css

Thanks,
Anil

Collapse
shnydercom profile image
Jonathan Schneider (shnyder) Author

Since you're using Material UI, I recommend you have a look at how it does styling with JSS, their approach to theming, etc: material-ui.com/styles/basics/

The different approaches to bundling css for libraries would be a good topic for another blog post, I deliberately chose not to cover that here, to focus on monorepo-structure more. In the end, CRA will split your css in chunks when building. So the question is how your library users will consume that. If your CRA App is the only consumer, I'd recommend importing css only in the *.story-files, keeping it out of your components. In your CRA App, add an scss file that imports all the css you need, e.g. @import "../../ui-lib/src/components/yourfile.css. This is more a practical approach than a clean approach, but it separates concerns and will thus continue to work, even if there's a version update to create-react-app.

If you want to publish your library, see which CSS-with-javascript combination you're using (JSS, CSS Modules, ...) and check for the recommended build process.