DEV Community

loading...

Discussion on: Creating a common component library with CSS and SASS in React.

Collapse
akirautio profile image
Aki Rautio Author

Great question! :) You are absolutely right that building the package with yarn build will result an application instead of package. The focus in here is more to show power of different tools when developing the common components. Creating a package would be probably a good topic for an article but here couple of main points:

The package is just one directory inside node_modules which can be imported from the application the way you please. This means that in a simplest form you don't have to do any builds because that's a job for the application which consumes the package. Usually some preparation is still done so that imports don't look like following and correct packages are also installed when consuming the package.

import Button from 'library/src/components/Button/Button'

Now this is where the personal preferences comes to play since there are a lot of tools and ways to achieve the same results. If you are looking any tools to build cjs, esm or umd files for a package I would suggest to try rollup.js. Note that SASS won't be needed to build at this point because that's the job for the application who consumes the common library.

For configuring the package.json file, I would suggest to look this Creating your first npm package .

Hopefully these helped :)