In my Nuxt project, I have set up two pages:
|-pages/
|---index.vue
|---login/
|-----index.vue
The index.vue located in the pages directory contains the following styles:
<style lang="scss">
html,
body,
#__nuxt,
#__layout,
main {
height: 100%;
}
</style>
It is necessary for my container to take up the entire screen height, so the styles cannot be scoped. Everything works fine here, but when I navigate to the /login page, these styles are still being applied inexplicably even after removing the <styles> tag from pages/login/index.vue. This issue perplexes me.
In theory, the styles from pages/index.vue should not affect the /login page 😣
The only workaround I have found is to use the scoped attribute in the style tag of page/index.vue, but this restricts my ability to modify the height of Nuxt's containers.
Do you have any suggestions for a better approach?