Hey everyone! First of all, thank you for the great work on this project.
I just found out that if there is a z-index
property defined in the style section of a Vue component, it will be changed to 1 after it has been built. I was able to reproduce this behavior on Nuxt.js v1.0.0-rc4.
Example:
components/Nav.vue
<template>
<nav class="c-nav"></nav>
</template>
<style>
.c-nav {
position: fixed;
z-index: 3; /* will be changed to 1 */
}
</style>
Setting up the scope
attribute doesn't fix the mentioned issue.
Another example is the built-in nuxt-loading
component. It has z-index: 999999
which is then changed to 1
once it's built.
My assumption is that there is an issue with the webpack configuration and more specifically the unsafe style optimizations :)
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This bug report is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1256">#c1256</a>)</em></sub></div>