Skip to content
loading...

re: Creating a common component library with CSS and SASS in React. VIEW POST

TOP OF THREAD FULL DISCUSSION
re: I don't see how this is creating a library of components. For example, if you use Create-React-App like you suggest, the 'yarn build' command make...
 

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 :)

code of conduct - report abuse