Replacing index.css with index.scss and Storybook issue

:wave: Hey gang! I ran into an issue today spinning up Storybook after some updates and wanted to give others (and myself) a heads up when googling in the future. I got some errors running yarn rw storybook, which included the following line:

Module not found: Error: Can't resolve '~__REDWOOD__USER_WEB_DEFAULT_CSS' in '/Users/{USERNAME}/git/github/upgo/node_modules/@redwoodjs/core/config/storybook'

It seems that Redwood’s Storybook configuration is expecting an index.css file in the root of the web side. We had added Sass and replaced index.css with index.scss. The app worked fine this way, but storybook had an issue with the missing index.css. Not sure what we want to do about this, but wanted to start a discussion for Storybook and Sass-based projects.

Hi @RyannosaurusRex! Thanks for posting this.

First off, can you confirm you’re running v0.15.3? I’m guessing you are, but running yarn rw info can quickly confirm if you need to check.

Here’s where the Storybook preview config comes from:

It does appear it’s only targeting index.css, which might explain your error above. Would you be willing to try a PR to either target both .css and .scss or make this more intelligence to pick up whatever is being used? No pressure if not – just let us know.

And either way, @peterp would be the one to help us figure out the next step.

Thanks all!

Ah, this looks like a bug - we’ll have to determine the extension of this file.

1 Like

Yes, I’m running 0.15.3.

I’ll set things up and see if I can get a first PR this week.


That would be rad! And please do let us know if there’s anything we can do to help get you going.

Great place to start is the Contributing doc: