CSS not loaded in local environment

Question

CSS not loaded in local environment

Dexalt142 opened this issue 3 years ago · 17 comments

Hello, I forked this repo and cloned it into my computer and ran yarn install. All deps installed and yarn.lock hasn't been affected.
After all the deps are installed I ran yarn dev. Files built, development started with no errors.

The issue is every time I opened localhost:4000 in my browser the CSS is not loaded. Are there any steps that I missed? Thanks.

Answer 1 · 2022-01-18T11:06:27.000Z

Hi @Dexalt142
I can't reproduce it and have never experienced that.
Are you on main branch and are you sure you have no changes? I would suggest removing node_modules/, .nuxt/ and retrying yarn ; yarn dev 🤷

Anyone else having this issue?

Answer 2 · 2022-01-19T13:52:04.000Z

Hi @Dexalt142
Can you tell us more about your development environment?

Which browser were you using and the version
Node/npm and yarn version
What operating system are you using
Does your browser have any extensions that you suspect are blocking CSS?
Your terminal doesn't show any error?

Answer 3 · 2022-01-19T17:07:55.000Z

Hi @Dexalt142 I can't reproduce it and have never experienced that. Are you on main branch and are you sure you have no changes? I would suggest removing node_modules/, .nuxt/ and retrying yarn ; yarn dev 🤷

Anyone else having this issue?

Yes I'm on main branch and I have no changes. Already tried removing node_modules/, .nuxt/ and ran yarn install, yarn dev several times but still no luck.

Answer 4 · 2022-01-19T17:17:31.000Z

Hi @Dexalt142 Can you tell us more about your development environment?

Which browser were you using and the version

Node/npm and yarn version

What operating system are you using

Does your browser have any extensions that you suspect are blocking CSS?

Your terminal doesn't show any error?

Google Chrome 97.0.4692.71 and Microsoft Edge 97.0.1072.62
Node 14.17.4 and Yarn 1.22.17
Windows 10 21H1
Nope
No warnings and no errors

Answer 5 · 2022-01-20T00:18:06.000Z

@Dexalt142 try upgrading your node version to LTS.

Answer 6 · 2022-01-22T14:56:51.000Z

@felipesuri Node upgraded to LTS version, installed the deps using npm install instead of yarn install. Unfortunately, I still got the same issue.

Answer 7 · 2022-01-23T12:44:02.000Z

@Dexalt142 With the LTS version, exclude the folder and clone again, and install dependencies with yarn.

Answer 8 · 2022-01-27T07:43:40.000Z

@felipesuri Cloned the repository, I installed the dependencies both with npm install and yarn install, and the issue is still there. I also tried repeating the same process on the other machine and I still got the same issue 😕

Answer 9 · 2022-01-27T11:53:40.000Z

@Dexalt142 This is so strange. When you run yarn dev and open the site in your browser, see what is on the console and if has an error, send a screenshot, please.

Answer 10 · 2022-01-27T12:10:34.000Z

@Dexalt142 I actually thought of something. Do you have an .env file, copied from .env.example?
If not, please create it. The missing RECAPTCHA_SITE_KEY variable breaks partners pages.

But I guess this is not your issue. I re-cloned the repo and did not have any issues 😞

Answer 11 · 2022-01-27T12:19:46.000Z

@smarroufin .env file is not the problem, because I tried here and worked without .env. I made the same steps from the description and worked.

Maybe the problem is with Windows, I really don't know.

Answer 12 · 2022-01-27T12:35:13.000Z

@smarroufin Yes, I have an .env file.

@felipesuri Yeah I tried this on 2 Windows machines and got the same result, Windows might be the problem.
And here is the screenshot of the browser console.

Answer 13 · 2022-01-27T12:50:18.000Z

@Dexalt142 Can you try running the app on Firefox Browser?

Answer 14 · 2022-01-27T14:50:58.000Z

@Dexalt142 Everything works fine for me on Windows 11 with WSL2.
I'm using Brave Browser wich is chromium-based.

Furthermore, I have exactly same outputs in my browser console.

Could you inspect an element (Right click => Inspect) that should be styled (any text should be fine) and check Styles panel ?

When it's working it says that the CSS classes are defined within a <style> tag, you can click on it and it jumps in the page html source code to show you where the CSS is defined.

If the CSS is here, it can be a browser issue, try disabling all extensions and also try with a different browser.
If the CSS isn't here, it's pretty hard to know yet what's going on right now without being able to reproduce it but we'll try our best to figure out with the information you provide.

Answer 15 · 2022-01-28T18:16:48.000Z

@felipesuri Firefox gives the same result

@kevinmarrec I compared local and nuxtjs.org version, and here are the results:
local

nuxtjs.org

Answer 16 · 2022-07-24T04:18:55.000Z

I have the same problem😅

Answer 17 · 2023-02-24T06:55:09.000Z

I have the same problem😅