Nuxt 3 SSR样式加载问题：服务端与客户端样式顺序不一致

在Nuxt 3 SSR开发场景中，服务端渲染与客户端渲染时的样式表加载顺序不一致，会导致页面布局出现偏移问题。以下是具体场景、代码示例及可行解决方案：

问题场景与代码示例 #

组件依赖关系：根组件 → Comp2 → Comp1，两者均使用CSS Module：

根组件 #

<template>
  <div>
    <Comp2 />
  </div>
</template>

<script setup lang="ts">
import Comp2 from './src/test/comp2.vue';
</script>

Comp2.vue #

<template>
  <Comp1 :class="$style.Comp2"></Comp1>
</template>

<script setup lang="ts">
import Comp1 from './comp1.vue';
</script>

<style module lang="scss">
.Comp2 {
  padding: 60px;
  border: 4px solid black;
}
</style>

Comp1.vue #

<template>
  <div :class="$style.Comp1"></div>
</template>

<script setup lang="ts">
</script>

<style module lang="scss">
.Comp1 {
  padding: 20px;
  border: 1px solid red;
}
</style>

样式加载顺序差异 #

• 服务端渲染时样式顺序：

[ 
  '<link rel="stylesheet" href="/_nuxt/src/test/comp2.vue?vue&type=style&index=0&lang.module.scss" crossorigin>',
  '<link rel="stylesheet" href="/_nuxt/src/test/comp1.vue?vue&type=style&index=0&lang.module.scss" crossorigin>' 
]

• 客户端渲染时样式顺序：

[
  '<link rel="stylesheet" href="/_nuxt/src/test/comp1.vue?vue&type=style&index=0&lang.module.scss" crossorigin>',
  '<link rel="stylesheet" href="/_nuxt/src/test/comp2.vue?vue&type=style&index=0&lang.module.scss" crossorigin>' 
]

已尝试的临时解决方法 #

• 提升选择器优先级（如使用.Comp2.Comp2 {}），通过权重覆盖抵消顺序差异，但未从根源解决问题
• 尝试通过nitro.hooks.hook('render:html')修改服务端样式表顺序，但实现复杂且维护成本高

可靠解决方案 #

方案1：使用Vite CSS排序插件（推荐） #

通过vite-plugin-sort-css强制统一服务端与客户端的样式加载顺序，插件会按照组件依赖树自动排序样式：

1. 安装插件：

npm install vite-plugin-sort-css --save-dev

2. 在nuxt.config.ts中配置：

import sortCss from 'vite-plugin-sort-css'

export default defineNuxtConfig({
  vite: {
    plugins: [sortCss()]
  }
})

方案2：开启Nuxt实验性CSS提取功能 #

启用experimental.cssExtraction将所有组件样式合并到统一的CSS文件中，避免多个link标签的顺序冲突，同时优化性能：

export default defineNuxtConfig({
  experimental: {
    cssExtraction: true
  }
})

方案3：手动指定全局CSS加载顺序（小型项目适用） #

在nuxt.config.ts的css数组中按依赖顺序指定组件样式，确保服务端与客户端加载顺序一致：

export default defineNuxtConfig({
  css: [
    '@/src/test/comp1.vue',
    '@/src/test/comp2.vue'
  ],
  vite: {
    css: {
      modules: {
        generateScopedName: '[name]_[local]_[hash:base64:5]' // 统一类名生成规则
      }
    }
  }
})

总结 #

• 优先选择方案1或方案2：方案1直接解决顺序问题，方案2从打包层面消除顺序影响，两者均无需修改组件代码
• 方案3适合小型项目临时使用，维护成本较高

内容的提问来源于stack exchange，提问作者Kirill Grechin