conscious-sapphire

css takes effect in dev, but not prod

My app's __root.tsx imports my CSS like below. Is this correct?

import "uno.css"; 
import "@/styles/global.css";

import "uno.css"; 
import "@/styles/global.css";

My CSS applies when running for dev, but not for production build, even though javascript and all routes work. The prod build's dist/_build/assets does contain a CSS file with expected file contents. Do I need to manually add CSS to the document head element or something?

17 Replies

conscious-sapphireOP•6mo ago

Here is dist dir. You can see client-adsfs.css and ssr-sfsdf.css. I have no set up ssr, so this must just always be there

rare-sapphire•6mo ago

what does "not setup SSR " mean? we don't have much css support right now in start apart from importing via ?url proper css support will follow soon once we have migrated off vinxi

conscious-sapphireOP•6mo ago

I haven't done anything ssr-related, is all. I'll try adding ?url to see if that sorts it ok, nope adding ?url actually broke styles in dev. So I'll remove it so they work in dev at least. If any other suggestions to troubleshoot please lmk

rare-sapphire•6mo ago

I don't understand. start will SSR you then need to link the style in head()

conscious-sapphireOP•6mo ago

how can I do that if I don't know what file name will be generated by vite? ohhh using ?url there let me try

rare-sapphire•6mo ago

just like all our start examples do

conscious-sapphireOP•6mo ago

Ok. I started from the Convex Tanstack Start template and it didn't have any css (npm create convex@latest -- -t tanstack-start)

rare-sapphire•6mo ago

sorry don't know that template

conscious-sapphireOP•6mo ago

I got this working for global.css! Ty! Still trying to sort out unocss b/c it does not behave the same for some reason Working code for future searchers:

// 1. unocss works in dev, but not prod. I'm still researching for this one. 2.) global css works in dev and prod now.
import "uno.css"; 
import globalCSS from "@/styles/global.css?url";

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "TanStack Start",
      },
    ],
    links: [
      { rel: "stylesheet", href: globalCSS }
    ],
  }),
  notFoundComponent: () => <div>Route not found</div>,
  component: RootComponent,
});

// 1. unocss works in dev, but not prod. I'm still researching for this one. 2.) global css works in dev and prod now.
import "uno.css"; 
import globalCSS from "@/styles/global.css?url";

export const Route = createRootRouteWithContext<{
  queryClient: QueryClient;
}>()({
  head: () => ({
    meta: [
      {
        charSet: "utf-8",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
      {
        title: "TanStack Start",
      },
    ],
    links: [
      { rel: "stylesheet", href: globalCSS }
    ],
  }),
  notFoundComponent: () => <div>Route not found</div>,
  component: RootComponent,
});

rare-sapphire•6mo ago

as I wrote above, we are working on full css /css module support. stay tuned. then you won't need to import via ?url

harsh-harlequin•6mo ago

When are you planning to migrate of Vinxi, can i track any progress on this in the repo? Im planning to migrate a React app build with Vite and Tanstack router to Tanstack Start.

rare-sapphire•6mo ago

migration is ongoing at the moment. cannot give an estimate here. it's our top priority. once vinxi is gone,I can continue to implement css support

harsh-harlequin•6mo ago

alright thanks! im not that interested in css support since i will be using tailwind, was just curious how the migration from Vinxi was going. i see a branch 'devinxi' i think that is where its happening. Will is be a lot of work if i migrate to start now. the only thing i will be using the server for is a layer between the frontend and our separate backend.

rare-sapphire•6mo ago

we hope the migration will be easy. API routes will need some modifications. aside from that it's mostly config changes (from app.config.ts to vite.config.ts)

harsh-harlequin•6mo ago

Thanks!

rare-sapphire•6mo ago

if you plan to use any of the currently exposed nitro features (e.g. prerendering) , those will also change

harsh-harlequin•6mo ago

i will try to not use anything special for the moment until the Vinxi migration has been finished.

Gaming

Programming

css takes effect in dev, but not prod

Did you find this page helpful?