Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Server doesn't return a generated CSS file from .next folder #10414

Closed
jiv-e opened this issue Feb 4, 2020 · 3 comments
Closed

Server doesn't return a generated CSS file from .next folder #10414

jiv-e opened this issue Feb 4, 2020 · 3 comments

Comments

@jiv-e
Copy link

jiv-e commented Feb 4, 2020

Bug report

Describe the bug

After 'npm run build' SASS based CSS file is generated in .next folder. After running 'npm run start' it's referenced in the HTML correctly, but not found (404).

To Reproduce

next-js-css-file-not-found-issue.zip

  1. Download the above file and uncompress it to a selected folder.
  2. Cd to the selected folder.
  3. Run npm install. (The node.js version I used is v12.14.1)
  4. Run npm run dev.
  5. Open the browser in http://localhost:3000.
  6. The background is green and the text is red. CSS is applied correctly and the SASS globbing works.
  7. Stop the dev process.
  8. Run npm run build; npm run start.
  9. Open the browser in http://localhost:3000.
  10. Styles are not applied.
  11. Open the browsers network tab. See that the CSS file is referenced but it's not found (404).
  12. Check the .next folder and confirm that the CSS file is in place. You should also notice that other files under this folder are found correctly.

Expected behavior

npm run start would serve the CSS file.

System information

  • OS: macOS
  • Version of Node.js: 12.14.1
  • Version of Next.js: 9.2.1

Additional context

I'm trying to get SASS globbing working and couldn't find a way to do that with @zeit/next-sass.
It would also be great to get this working with @zeit/next-sass. Input is welcome!

@jiv-e
Copy link
Author

jiv-e commented Feb 4, 2020

This can be fixed by building the CSS file inside static/.
Strange... Think I already tried this.

So in my example project change the SASS build target like this:

Inside next.config.js

config.plugins.push(new MiniCssExtractPlugin({
      filename: 'static/style.css'  // Changed from: 'style.css'.
    }))

I'll close this now. But if someone can give some more information on the issue, please do! For example... why .next/ is not directly accessible through the network.

@jiv-e jiv-e closed this as completed Feb 4, 2020
@Timer
Copy link
Member

Timer commented Feb 4, 2020

You can try our built in Sass support and delete your entire next.config.js:
#10134

@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 30, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants