[next-css] Not finding style.css in production

[stramel]

Attempting to build for production and the styling is failing using next-css.

Steps I'm using to test "production" build:

1. NODE_ENV=production next build
2. NODE_ENV=production node server.js

Here are my config files https://gist.github.com/stramel/bfcf2c8d2572f92a344bfc6247a51f08

This is my server file.
https://gist.github.com/stramel/7f2b66a51b5557d8f5d00f2f4a7078b7

My index.css file contains:

@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";
@import "leaflet/dist/leaflet.css";
@import "leaflet.pm/dist/leaflet.pm.css";
@import "draft-js/dist/Draft.css";
@import "draft-js-mention-plugin/lib/plugin.css";

a,
a:hover {
  color: inherit;
  text-decoration: inherit;
}

pre {
  background: inherit;
  padding: inherit;
}

.pt-portal {
  display: block;
}

.pt-overlay.pt-overlay-open.pt-overlay-scroll-container,
.pt-transition-container,
.pt-toast-container {
  z-index: 1000;
}

.pt-input {
  border-radius: 4px;
}

/* Style necessary for Leaflet Draw */
.sr-only {
  display: none;
}

This is my _document.js, _app.js, index.js file.
https://gist.github.com/stramel/67b76f1c13445709b112f0902a4042d3

Using Next.js v6.0.3 with next-css v0.1.5

I will attempt to create a reproducible repo for you.

[timneutkens]

Time to upgrade 😄 https://github.com/zeit/next-plugins/blob/master/packages/next-css/package.json#L3

[stramel]

Dang it... I always somehow miss releases on mono repos 😅

Thanks @timneutkens! Seems to be working.

[stramel]

@timneutkens Actually, it seems I was fooled. I tested with next dev first which properly build out the style.css file. Then I ran next build which left that file there, so when I ran next start it was there.

Running a clean next build and next start still returns the error even using next-css#^0.2.0

[stramel]

I was able to reproduce this issue on this repo, https://github.com/stramel/next-css-issue-177

Steps to Reproduce:

1. Clone https://github.com/stramel/next-css-issue-177
2. Run yarn
3. Run yarn dev. Observe that .next/static/style.css file exists.
4. Run yarn clean
5. Run yarn build.

Expected Result:
.next/static/style.css to be generated for both yarn dev and yarn build.

Actual Result:
.next/static/style.css only exists when yarn dev is ran.

[stramel]

I found that I can workaround this in my case by moving the CSS to the _app.js page instead of the _document.js.

[adamsoffer]

@stramel your workaround worked for me as well. For some reason, you can't import css inside _document.js when running the build in production.

[Irrelon]

I had withLess(withCSS( in my next.config.js. Removing withLess( fixed it for me (also upgraded next-css to 0.2.0 although that didn't fix it for me, removing withLess did.

[macalinao]

I have the same problem

[macalinao]

Fixed it by including my CSS files in _app.js.