How to include CSS into the exported package

[tdiluzio]

Hi guys,

I can't figure out how I can 'publish' my package with its corresponding CSS file. For instance I created a CustomTable component which imports the ReactTable package. I also import its CSS. But when I build and export the CustomTable package, the CSS file is missing. Do you have any clues? Thanks for your time

[DimiMikadze]

Hi @tdiluzio

After running npm run build, there should be CSS file inside build folder, it's not there for you?

[tdiluzio]

Hi @DimitriMikadze thanks for your answer and for this project.

There's indeed an index.cssfile inside the build/cssfolder. What I'm trying to do is to export my module with its CSS without having to import it explicitly in parent component which uses it.

[DimiMikadze]

@tdiluzio thanks!

To export module without extracting CSS to separate file, you have to edit production configuration file of Webpack, you can find this file inside config/webpack.config.prod.js and extract-text-webpack-plugin is the dependency that is extracting CSS to it's own file.

[tdiluzio]

Let me rephrase my concern I realize I wasn't clear in the first hand sorry for that.

I'd like to be including CSS within a module without having to import a CSS file explicitly. For instance, in the lib/components/Examplecomponent which imports ./Example.css:

when I run yarn startinside the project the CSS is doing its job well but when I build using yarn build and that I import this Example component inside of a project I do get the HTML but the CSS does not get included in the module (nor the images)

In fact dependencies are resolved within the library project folder but not in another project when built and exported

[DimiMikadze]

@tdiluzio

In production CSS isn't included inside bundle.js, therefore you have to include it from node_modules, like this: import 'node_modules/{library-name}/build/css/index.css'

[tdiluzio]

This does it thanks for your time @DimitriMikadze

[ronaiza-cardoso]

@tdiluzio can you help me? I'm doing the same thing that you are doing, using react-table to make an package, works as expected when I run on my demo app inside the npm package but when I download and use says that Grid the component that I've exported was undefined

[tdiluzio]

Hi @ronaiza-cardoso are all the files you built present in the build folder?