Scaffold css not loading

Get Help and Help Others
1

On the Getting Dynamic section of the tutorial it seems I should be getting some styling applied after the pages are scaffolded. I’m not.

I can see in the PostsLayout.js file there is the rw-scaffold className and the scaffold.css file is in web/src, but it isn’t getting loaded when spinning the site up.

Any ideas? Where should that be happening?

2

After running the scaffold command you there are two things that happen for those styles:

  1. a new file is created, web/src/scaffold.css
  2. inside of web/src/index.js there should be an added line: import './scaffold.css'
3

Ah ha!

In my web/src/index.js is:

import './index.css'

not scaffold.css

2 Likes
4

Interesting, could you tell us a bit about your dev-environment?

5

windows 10 / wsl2 / vscode

The one glitch i did run into during the tutorial was the first scaffolding for Posts. It failed a couple times. Then a note i saw on here that said to:

yarn rw db save
yarn rw db up

and then the scaffolding worked. Not sure yet if that had anything to do with the CSS bit, but possibly.

I’m going to do a fresh run-through and see if it happens again.

6

Yeah let us know the outcome of that. We released a patch recently that would prevent the file itself, scaffold.css, from being created if it already existed, but I don’t think we messed with the code that adds the import.

7

I wasn’t able to reproduce this. I started with a brand new app with yarn create redwood-app example and then adding a super simple Usermodel:

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
}

And then:

yarn rw db save
yarn rw db up
yarn rw scaffold user

I have both the scaffold.css file and the import statement:

image
image1322×834 118 KB

8

this happened to me after discarding git changes. It seems like yarn rw g scaffold post doesn’t add the CSS reference. (Could this be somehow related to the presence of empty folders?).

Anyway, you just need to add import "./scaffold" in web\src\App.tsx as mentioned above