Remix - Basic Codegen CSS Not Working

Developer Support
1

Hey there,

I did the following:

  1. Create new Remix project

    • Pushed to github (orionkoch/tom-test)

  2. Create new plasmic project

    • Published it to the repo with codegen

  3. Added Homepage component to the app/routes/index.tsx.

import Homepage from '../../components/Homepage';

export default function Index() {
  return <Homepage />;
}
  1. Wrapped all the component code in /app/route.tsx with PlasmicRootProvider
export default function App() {
  return (
    <PlasmicRootProvider>
      <html lang="en">
        <head>
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width,initial-scale=1" />
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
          {process.env.NODE_ENV === 'development' && <LiveReload />}
        </body>
      </html>
    </PlasmicRootProvider>
  );
}

This works but no CSS is rendered.

Stackbli

Any thoughts here? Thanks.

2

Remix does not support importing CSS.

https://remix.run/docs/en/v1/guides/styling

We are still researching how best to support, and be supported by, the various styling libraries without sacrificing the user’s network tab or creating a maintenance burden for Remix.

You’ll need to apply one of the alternative workarounds described there.