Why Nuxt is taking styles from other pages?

user_11775814 0
Viewed 252

I have two pages in my Nuxt project:

|-pages/
|---index.vue
|---login/
|-----index.vue

The index.vue inside pages has these styles:

<style lang="scss">

   html,
   body,
   #__nuxt,
   #__layout,
   main {
      height: 100%;
   }

</style>

As you can see, I need my container taking all the screen height, so I need to put that style in all Nuxt containers, for that reason, my styles can't be scoped. Here all is fine, but when I go to /login I don't want those styles, but for some reason Nuxt is applying those styles, even if I delete the <styles> label inside pages/login/index.vue, I don't know why...

In theory, the pages/index.vue styles shouldn't be loading if I'm in /login

The only solution I found is to put the scoped attribute to page/index.vue style label, but it doesn't allow me to change the Nuxt's containers height.

Do you know a better way to do it?

nuxt.js vue.js css styles
1 Answers

If you define global CSS styles (by not scoping them), they will indeed be applied to your whole app.
The behavior in login/index.vue of your styles having the properties is hence totally fine.

This is called CSS Cascade.

If you don't want the behavior being applied to the other pages, you need to either override the properties in the other .vue files (which is fine to a certain point) or scope the styles of your root index.vue.

You can of course also use Nuxt layouts, if you want to apply styles to a specific group of pages.

Also, height: 100%; is a pretty generic property. You will not really need it if you use your page flow (by adding regular blocks of HTML one to the other), it will put them accordingly.
For further CSS issues, the usage of the inspector of your browser's devtools is highly recommended and will spare you some struggle!

user_88165850
Related