[Bug Report] Navigation-drawer background color change

[Noreu]

Environment

Vuetify Version: 2.2.22
Vue Version: 2.6.11
Browsers: Firefox 75.0
OS: Windows 10

Steps to reproduce

Unfortunatly I can't reproduce the bug on codepen.
It's work on dev build with npm run serve, but doesn't work on production build with npm run build.

Expected Behavior

Navigation drawer with a grey background

Actual Behavior

Navigation drawer with a black background

Reproduction Link

https://codepen.io/Noreu/pen/RwWGmbR

Other comments

In production the .theme--dark.v-sheet background-color style override the .v-navigation-drawer .v-list background style and apply the the #1e1e1e color in place of inherit attribute.

I have some [mini-css-extract-plugins] error when I run build, for example :

chunk chunk-88ba3232 [mini-css-extract-plugin]
Conflicting order. Following module has been added:

• css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VSheet/VSheet.sass
  despite it was not able to fulfill desired ordering with these modules:
• css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/directives/ripple/VRipple.sass
  • couldn't fulfill desired order of chunk group(s) , :
  • while fulfilling desired order of chunk group(s) , , , , , ,
• css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VProgressLinear/VProgressLinear.sass
  • couldn't fulfill desired order of chunk group(s) ,
  • while fulfilling desired order of chunk group(s) , , , , , ,
• css ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VCard/VCard.sass
  • couldn't fulfill desired order of chunk group(s) ,
  • while fulfilling desired order of chunk group(s) , , , , , ,

I'm not comfortable with webpack but I view a tip wich tell to add the code above in vue.config.js :

css: {
    extract: {
      ignoreOrder: true
    },
  },

Warnings disapears but that don't resolve the problem.

Thanks for the help !

[jacekkarczmarczyk]

We accept minimal github repo as reproduction as well

[Noreu]

Tried to reproduce the error but I can't.
Don't know why it's work with a smaller project but the warnings are still there during the build...

[jacekkarczmarczyk]

You can send screenshots of markup + css both for development and production, similar like in #8067 (comment)

[Noreu]

The good way :

The wrong :

I just see it's another css file that override the .theme--dark.v-sheet css rules.

[Noreu]

I solved the problem with this line on the vue.config.js file :

lintOnSave: false,
  runtimeCompiler: true,
  filenameHashing:false,
  productionSourceMap: false,
  configureWebpack: {
    resolve: {
       symlinks: false
    },
    optimization: {
      splitChunks: {
       cacheGroups: {
          app: {
            chunks: 'all',
            name: 'main',
            test: /[\\/]src[\\/](.*)[\\/]/,
          },
          flagIcons: {
            chunks: 'all',
            name: 'flagIcons',                
           //test: /[\\/]node_modules[\\/]@coreui[\\/]((icons).*)[\\/]/,
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((flag).*)[\\/]/,
          },
          freeIcons: {
            chunks: 'all',
            name: 'freeIcons',                
           //test: /[\\/]node_modules[\\/]@coreui[\\/]((icons).*)[\\/]/,
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((free).*)[\\/]/,
          },
          brandIcons: {
            chunks: 'all',
            name: 'brandIcons',                
            test: /[\\/]node_modules[\\/]@coreui[\\/]icons[\\/]js[\\/]((brand).*)[\\/]/,
          },
          vendors: {
            chunks: 'all',
            name: 'vendors',
            test: /[\\/]node_modules[\\/]@coreui[\\/]((?!icons).*)[\\/]/,
          },
          // Merge all the CSS into one file
          styles: {
            name: 'styles',
            test: /\.s?css$/,
            chunks: 'all',
            minChunks: 1,
            reuseExistingChunk: true,
            enforce: true,
          }
        }
      }
    }
  }

[matheuschimelli]

I'm having the same problem with v-drawer. I tried to update vuetify to the last stable version but it didn't work. I'm suspecting the problem itself is with the color property on v-drawer that is not been applied because the theme--dark.v-sheet class is overwriting the color property

The color property is applied, but it has not effect

I solve it by adding a class on v-list:

<v-list class="customListColor">

.customListColor {
  background: rgb(55, 71, 79) !important;
}

It is just a quick fix but it solved my problem with v-drawer. I think that it could have a better way to handle with this error, but as i said it is just a quick fix.

[KaelWD]

<v-list color="transparent">

[johnleider]

fixed in baeb8a6