Great question, and it took a bit of time to figure out.
Getting SCSS to work with the rollup bundle is extremely easy. All you need to do from the current state of the tutorial is update rollup.config.js in the dts() plugin config section. Change the external value from just CSS to:
external: [/\.(css|less|scss)$/],
With that alone you can now change Button.css to Button.scss and import Button.scss in your Button component. That's it! The Postcss plugin for Rollup that is already installed will take care of it for you.
Getting it to work with Stoyrbook however is another beast altogether and involves re-installing Storybook using the Webpack 5 option instead of the default webpack 4. More than I can fit in a comment here, but I may update the blog post itself.
I have however updated the repository with those changes, so it should work out of the box with Storybook if you clone it now.
Thanks Alex, I was really lost on how to add sass to my component library, and although I followed the steps that storybook recommends, I had not realized that the errors that kept happening were due to the webpack version, thank you very much for this update. 👏👏
Greetings from Chile! 🙌
Hi Alex, very good publication, but I was left with a question, how can I work or include sass in my component library?
I would appreciate the help!
Great question, and it took a bit of time to figure out.
Getting SCSS to work with the rollup bundle is extremely easy. All you need to do from the current state of the tutorial is update
rollup.config.jsin thedts()plugin config section. Change theexternalvalue from just CSS to:external: [/\.(css|less|scss)$/],With that alone you can now change
Button.csstoButton.scssandimport Button.scssin your Button component. That's it! The Postcss plugin for Rollup that is already installed will take care of it for you.Getting it to work with Stoyrbook however is another beast altogether and involves re-installing Storybook using the Webpack 5 option instead of the default webpack 4. More than I can fit in a comment here, but I may update the blog post itself.
I have however updated the repository with those changes, so it should work out of the box with Storybook if you clone it now.
Cheers.
Will you please tell how to make it work with css modules.. how to resolve module.scss extension?
Simply add
modules: trueon your Rollup postcss plugin. There's a section for modules on the plugin NPM docs:npmjs.com/package/rollup-plugin-po...
Thanks Alex, I was really lost on how to add sass to my component library, and although I followed the steps that storybook recommends, I had not realized that the errors that kept happening were due to the webpack version, thank you very much for this update. 👏👏
Greetings from Chile! 🙌
New SCSS section has been added to the post.