DEV Community

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

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

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