Блог

У меня есть две страницы в моем проекте Nuxt:

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

 

index.vue Внутри pages есть эти стили:

 <style lang="scss">

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

</style>
 

Как вы можете видеть, мне нужно, чтобы мой контейнер занимал всю высоту экрана, поэтому мне нужно поместить этот стиль во все контейнеры Nuxt, по этой причине мои стили не могут быть ограничены. Здесь все в порядке, но когда я захожу /login , мне не нужны эти стили, но по какой-то причине Nuxt применяет эти стили , даже если я удаляю <styles> метку внутри pages/login/index.vue , я не знаю, почему…

Теоретически pages/index.vue стили не должны загружаться, если я в /login 😣

Единственное решение, которое я нашел, — это поместить scoped атрибут в page/index.vue метку стиля, но это не позволяет мне изменять высоту контейнеров Nuxt.

Ты знаешь лучший способ сделать это?

Если вы определяете глобальные стили CSS (не определяя их область действия), они действительно будут применены ко всему вашему приложению.
Следовательно, поведение login/index.vue ваших стилей, обладающих свойствами, совершенно нормально.

Это называется каскадом CSS.

Если вы не хотите, чтобы поведение применялось к другим страницам, вам нужно либо переопределить свойства в других .vue файлах (что в определенной степени нормально), либо ограничить стили вашего корневого index.vue каталога .

Конечно, вы также можете использовать макеты Nuxt, если хотите применить стили к определенной группе страниц.

Кроме того, height: 100%; это довольно общее свойство. Вам это действительно не понадобится, если вы используете поток своей страницы (добавляя обычные блоки HTML один к другому), он разместит их соответствующим образом.
Для дальнейших проблем с CSS настоятельно рекомендуется использовать инспектор программ разработки вашего браузера, что избавит вас от некоторых проблем!