为什么Nuxt会加载其他页面的样式？有什么更优的解决方案？

Nuxt 中所有页面的非 scoped 样式都会被编译为全局样式，整站所有路由共享，不会因为切换路由就卸载其他页面的非 scoped 样式，因此首页写的全局样式在登录页也会生效，这是框架的默认机制。

• 方案1：首页单独绑定专属类隔离样式
  该方案仅让满屏高度样式在首页生效，其他路由不受影响，最贴合你的需求：

  1. 在pages/index.vue的脚本中，通过useHead给html标签绑定专属类名：

  <script setup>
  // Nuxt 3 写法
  useHead({
    htmlAttrs: {
      class: 'home-page'
    }
  })
  </script>
  
  <!-- Nuxt 2 写法 -->
  <script>
  export default {
    head() {
      return {
        htmlAttrs: {
          class: 'home-page'
        }
      }
    }
  }
  </script>
  

  2. 修改首页原有样式，嵌套在专属类名下：

  <style lang="scss">
  .home-page,
  .home-page body,
  .home-page #__nuxt,
  .home-page #__layout,
  .home-page main {
    height: 100%;
  }
  </style>
  

  样式只会在html标签带有home-page类（即访问首页）时生效，登录页无该类不会命中规则。

• 方案2：全局定义 + 特殊页面覆盖
  如果除登录页外，其他大部分页面都需要满屏高度样式，可以用该方案减少重复代码：

  1. 把满屏高度样式放到全局样式文件（如assets/css/global.scss），在nuxt.config中配置全局引入。
  2. 在pages/login/index.vue的脚本中，给html绑定专属类：

  <script setup>
  // Nuxt 3 示例
  useHead({
    htmlAttrs: {
      class: 'login-page'
    }
  })
  </script>
  

  3. 全局样式中新增覆盖规则：

  .login-page,
  .login-page body,
  .login-page #__nuxt,
  .login-page #__layout,
  .login-page main {
    height: auto; /* 替换为你需要的高度规则 */
    min-height: unset;
  }
  

• 方案3：基于布局系统拆分
  如果后续需要区分更多页面的全局样式，可通过Nuxt布局系统做结构化拆分：

  1. 新建layouts/default.vue，给需要满屏高度的页面使用，在布局中按方案1的方式绑定类、编写对应样式。
  2. 新建layouts/blank.vue，给登录页等不需要满屏高度的页面使用，不引入对应样式。
  3. 在页面中通过definePageMeta（Nuxt3）或layout配置项（Nuxt2）指定使用的布局即可。

内容的提问来源于stack exchange，提问作者Carlos Tinnelly