css changed after nuxt generate

user_9103301 0
Viewed 821

I'm using Nuxt with Vuetify. I created a class and assigned it some padding.
The class is defined in a unscoped <style> in layouts/default.vue.
when I'm on development mode (npm run dev) everything looks great as I aimed for. the class is on container element so the final html looks like
<div class="container container--fluid my-class">

the devtools look like that when I'm on dev mode:
enter image description here

so my-class is applied. But once I build the project (npm run generate) my-class is overridden by the container class rules:
enter image description here

I guess it is happening because of the order in which the classes combined into a single css but not sure it behaves differently for dev and built projects. How can I fix it?

nuxt.js vuetify.js vue.js
2 Answers

After some more digging it seems to be a known issue with nuxt. It happens when declaring styles in non-scoped style tag, and using it somewhere else.

I followed these steps: https://stackoverflow.com/a/60925793/9103301

which is basically integrating Vuetify into nuxt manually and not with @nuxt/vuetify. then I could control over the order the css is loaded in nuxt.config.js - first vuetify and then my styling (which I moved from the layout the a css file).

a more basic vuetify plugin that worked for me:

import Vue from "vue"
import Vuetify from "vuetify"
version "^2.1.1" ,
Vue.use(Vuetify)

export default (ctx) => {
  const vuetify = new Vuetify({
    theme: {
      dark: false, // From 2.0 You have to select the theme dark or light here
    },
  })

  ctx.app.vuetify = vuetify
  ctx.$vuetify = vuetify.framework
}

You'll have to install icons as well, vuetify default is mdi which is installed with npm install @mdi/font -D

user_91033010

managed to fix this by disabling tree shaking for vuetify. Change the following in nuxt.config.js:

  buildModules: [
    ["@nuxtjs/vuetify", { treeShake: false }],
  ],
user_98164390
Related