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

Collapse
soorajnairhs profile image
soorajnairhs • Edited

Hi Aki,
Thanks for all this information. I've created a component library like you mentioned. I've tried and use create-react-library to package. I've a theme.scss file which takes in other files like colors.scss, dimensions.scss, fonts.scss etc. These files have respective scss variables lile $primaryColor, $primaryPadding etc.
When I publish the package, I'm able to import controls in consumer app, like
import Button from 'component-repo';
However, I'm only able to see a compiled version of scss files, as just one css file.
I would like these variables to be updated by consuming application. The package I mentioned earlier uses rollup. Is there a way not to compile scss variables, and keep it as it is, and thereby making the component library actually useful. Any sort of help is well appreciated.

Thread Thread
soorajnairhs profile image
soorajnairhs

With the help of Aki, I was able to solve this issue. I've tried to put together the content in a stack overflow answer, over here.
stackoverflow.com/a/66670203/11027191
Many thanks for your support Aki :-)

Thread Thread
akirautio profile image
Aki Rautio Author

Thanks :) And superb that you wrote about it since I'm pretty sure that you are not the only having the same struggle.