Replacing index.css with index.scss and Storybook issue

RyannosaurusRex · August 2, 2020, 10:28pm

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.

thedavid · August 3, 2020, 3:46pm

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:

github.com

redwoodjs/redwood/blob/623eb3bedc8d8ac8c39065ed0e79d75d3e4074cc/packages/core/config/storybook/main.js#L19


const isEnvProduction = configType === 'production'

const rwConfig = isEnvProduction
  ? require('../webpack.production')
  : require('../webpack.development')

// We replace imports to "@redwoodjs/router" with our own implementation in "@redwoodjs/testing"
sbConfig.resolve.alias['@redwoodjs/router$'] = path.join(getPaths().base, 'node_modules/@redwoodjs/testing/dist/MockRouter.js')
sbConfig.resolve.alias['~__REDWOOD__USER_ROUTES_FOR_MOCK'] = getPaths().web.routes
sbConfig.resolve.alias['~__REDWOOD__USER_WEB_SRC'] = getPaths().web.src
sbConfig.resolve.alias['~__REDWOOD__USER_WEB_DEFAULT_CSS'] = path.join(getPaths().web.src, 'index.css')
sbConfig.resolve.extensions = rwConfig.resolve.extensions
sbConfig.resolve.plugins = rwConfig.resolve.plugins // Directory Named Plugin

// ** PLUGINS **
sbConfig.plugins = [
  ...sbConfig.plugins,
  ...getSharedPlugins(isEnvProduction),
]

// ** LOADERS **

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!

peterp · August 3, 2020, 7:08pm

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

RyannosaurusRex · August 4, 2020, 1:11am

Yes, I’m running 0.15.3.

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

thedavid · August 4, 2020, 3:50am

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:

github.com

redwoodjs/redwood/blob/main/CONTRIBUTING.md

# Contributing

Love Redwood and want to get involved? You’re in the right place!

Before interacting with the Redwood community, please read and understand our [Code of Conduct](https://github.com/redwoodjs/redwood/blob/main/CODE_OF_CONDUCT.md).

**Table of Contents**

- [Contributing](#contributing)
  - [Local Development](#local-development)
    - [Copy and Watch](#copy-and-watch)
      - [Specifying a RW_PATH](#specifying-a-rw_path)
    - [Local Package Registry Emulation](#local-package-registry-emulation)
      - [Setting Up and Running a Local NPM Registry](#setting-up-and-running-a-local-npm-registry)
      - [Publishing a Package](#publishing-a-package)
      - [Installing Published Packages in Your Redwood App](#installing-published-packages-in-your-redwood-app)
  - [Running Your Redwood App's Local Server(s)](#running-your-redwood-apps-local-servers)
  - [Integration tests](#integration-tests)
  - [Releases](#releases)
    - [Troubleshooting](#troubleshooting)

This file has been truncated. show original