Next-plugins: style.css not found when importing css in _document.js and using Now

[znarf]

Bug report

Describe the bug

When using Next.js + Next CSS on Now in production, and when importing a css in _document.js, /_next/static/style.css is _404_ not found.

This works fine locally in dev and production, also works on Now in dev.

To Reproduce

1. Go to: https://style-css-404-now-production-mzavnvnftu.now.sh
2. The "This should be green." text is not green. https://style-css-404-now-production-mzavnvnftu.now.sh/_next/static/style.css is _404_ not found.

Expected behavior

• The "This should be green." text is green.
• /_next/static/style.css is found and return a CSS file.

Source

https://github.com/opencollective/next-issues/tree/master/style-css-404-now-production

[miukimiu]

Hi @znarf,

I managed to fix this issue by importing the CSS in the _app.js file.

I found the solution on the issue #177.

[timneutkens]

We have 2 compilations. 1 for the server code 1 for the client code, as we render universally.

@zeit/next-css (and the other official styling plugins) hook into the compilation for client code only for generating CSS. When enabling CSS modules the server compilation is also involved, but only to output unique CSS class names.

Currently _document.js is added to the client compilation in development mode, as otherwise, we can't apply hot module reloading (refreshing the page) when changes are made.

I'm planning to refactor this a bit to not add _document to the client compilation in development.

However, this doesn't solve importing CSS files in _document.js, this is not really something we should support anyway as _document.js is only there to allow you to change the output HTML structure / implement some specific server-side rendering things like styled-components and other css-in-js solutions. We should instead document to use _app.js which is better suited for this anyway as it's part of the client compilation and the interactive app. Whereas _document.js is only rendered to static HTML on the server side and can't have interactive things like onClick etc anyway.

TLDR: We should document to use _app.js instead of _document.js for importing CSS.

[Anubh]

@timneutkens Yes it is the very important thing, It is not very clear about the use of _app.js and _document.js. Even import '../css/style.css', is not working in my js file even after enabling the _document.js. I am doing it by in .

Even I'm not sure @zeit/next-css this plugin is for creating CSS in ./next/styles folder only or it will help in import '../css/style.css' or not. Very confused. Although CSS is working but not sure about the use of the plugin.