chore(storybook): LPD-69705 Enable Storybook reloading on SCSS changes

[limaagabriel]

Ticket: https://liferay.atlassian.net/browse/LPD-69705

This change updates the .storybook/preview.js file to use the SCSS files directly instead of the CSS files. It allows the storybook dev server to watch SCSS files and update it live, allowing for faster SCSS adjustments.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
clayui.com	Ready	Preview	Comment	Nov 4, 2025 5:03pm
storybook.clayui.com	Ready	Preview	Comment	Nov 4, 2025 5:03pm

[pat270]

@limaagabriel I think the watch feature would work better if we ran yarn workspace @clayui/css run build inside clay/.storybook/ instead of having to run it in a separate window. I'm not too familiar with the Storybook API so you will need to reference https://storybook.js.org/docs.

[bryceosterhaus]

Hey @limaagabriel! This is a good functionality to add for developer experience. Instead of a full separate script, have you tried just replacing the storybook config to point to the scss source instead of the build css file?

For example, in ./storybook/preview.js, replace the first line with import '@clayui/css/src/scss/atlas.scss';

Let me know if that would work

[limaagabriel]

Thanks, @bryceosterhaus! Sounds a great idea, I'll try it today.

[limaagabriel]

@bryceosterhaus it works! Changing SCSS files now updates the storybook live.