Search code examples
vuetify.jsnuxt.jsnetlify

The CSS for my deployed NuxtJs site is not working

I've found some problems similar to mine, but nothing close enough for me I've built a blog-site using NuxtJs with Vuetify and have deployed it on Netlify. The site looks and works great for the most part. My site has a navigation drawer that is supposed to have a background-color of #659dbd. This color shows up in development. However, on the deployed site, the background-color is white. When I inspect the site in my dev tools, this color does show up in the styles, but it has a line through it, like this:

enter image description here

Does anyone have any idea what could be causing this?

I've looked at the Netlify gotchas, but couldn't anything regarding anything like this.

It's strange because all of my other stylings render fine.

If I've left anything out or if you need to see any code, let me know.

Solution

  • This happens because you probably using nuxt/vuetify module, and for development it use builded vuetify bundle, but for production it use treeshake version. And with treeshaken version of vuetify it do load css dynamically on page. So first loaded your page style, adn then vuetify load its own component styles and it overrides your own styles