Styles not rendered on the server

[corydeppen]

I've noticed styles are not rendered on the server and are only rendered once the client app starts, causing a brief flash of unstyled content. When I looked at build/assets.json, the css key was missing after running yarn start, but is present after running yarn build. If it's intentional to extract the styles only for a production build, I'm trying to understand how the styles can be rendered prior to the client app starting and preventing the FOUC.

[jaredpalmer]

This only happens during development. There is no FOUC when run in production. If this is problematic, I suggest extending razzle to use extract text webpack plugin to pull out style sheets during dev just as they are pulled in razzle-build. I am not sure that HMR will work the way you expect if you make this change

[anuraghakeem]

I am using styled components(CSSinJS) for my styling and am facing this problem in production too.

[snowsea-dev]

@corydeppen Hello. Have you solved this problem?

[thomasjm]

This would be nice to fix, even in dev. I would like to be able to disable Javascript in my browser and load my page in order to verify that SSR is serving a reasonable result. But due to this issue, some CSS missing until Javascript gets a chance to load, so the page looks messed up anyway.

[Himadu2000]

For anybody else, ran into a similar problem that scss is not loading. Replacing the style-loader with MiniCssExtractPlugin fixed it.

modifyWebpackConfig({
  env: { target, dev },
  webpackConfig,
  options: { webpackOptions },
}) {
  const config = webpackConfig

  if (target === "web" && dev) {
    // Replacing style-loader with MiniCssExtractPlugin
    const rules = [...config.module.rules]
    const { cssOutputFilename, cssOutputChunkFilename } = webpackOptions

    const { use } = rules.find(({ test }) =>
      test?.source?.includes(".(sa|sc)ss$")
    )

    const index = use.findIndex(({ loader }) =>
      loader.includes("style-loader")
    )

    if (index > -1) use[index] = MiniCssExtractPlugin.loader

    config.plugins.push(
      new MiniCssExtractPlugin({
        filename: cssOutputFilename,
        chunkFilename: cssOutputChunkFilename,
      })
    )
  }

  return config
}