如何阻止NuxtJS合并页面独立CSS文件以避免样式覆盖？

在NuxtJS项目中，index.vue和blog.vue各自引入独立CSS文件（index.css/blog.css），但开发环境下index.vue的样式会被blog.css覆盖（比如ul的list-style-type被强制改为circle）。调整extractCSS、cssCodeSplit等配置，甚至更换CSS存放目录都无法解决。观察发现index页面加载后，blog.css会被延迟注入，手动隐藏其关联样式可恢复正常。

以下是几种有效解决方案：

1. 使用Scoped样式（最推荐） #

直接将页面样式放在<style scoped>标签内，Nuxt会自动为样式添加唯一DOM属性前缀，确保样式仅作用于当前页面元素，彻底避免全局污染。

index.vue 修改后：

<template>
  <!-- 页面内容 -->
</template>

<script>
// 移除原script中的CSS import语句
</script>

<style scoped>
ul {
  list-style-type: none;
}
/* 其他index页面专属样式 */
</style>

blog.vue 修改后：

<template>
  <main>
    <ContentDoc />
  </main>
</template>

<script>
// 移除原script中的CSS import语句
</script>

<style scoped>
ul {
  list-style-type: circle;
}
/* 其他blog页面专属样式 */
</style>

若想保留独立CSS文件，也可在scoped样式中导入：

<style scoped>
@import "~/assets/css/index.css";
</style>

2. 使用CSS Modules #

将CSS文件重命名为index.module.css和blog.module.css，通过模块导入方式使用，样式会被自动添加唯一哈希前缀，实现样式隔离。

index.vue 修改后：

<script setup>
import styles from "~/assets/css/index.module.css";
</script>

<template>
  <ul :class="styles.ul">
    <!-- 列表内容 -->
  </ul>
</template>

index.module.css：

.ul {
  list-style-type: none;
}

3. 禁用页面预加载 #

Nuxt默认会预加载可见区域内的页面资源，导致其他页面CSS被提前加载。在nuxt.config.ts中关闭预加载：

export default defineNuxtConfig({
  router: {
    prefetchLinks: false
  }
})

4. 动态控制CSS加载与卸载 #

若必须使用独立全局CSS文件，可通过Vue生命周期钩子动态创建/删除link标签，确保仅当前页面加载对应CSS：

index.vue 示例：

<script setup>
import { onMounted, onUnmounted } from 'vue';

let styleLink = null;

onMounted(() => {
  styleLink = document.createElement('link');
  styleLink.rel = 'stylesheet';
  styleLink.href = '/css/index.css'; // 建议将CSS放在/public/css目录下，确保路径稳定
  document.head.appendChild(styleLink);
});

onUnmounted(() => {
  styleLink && document.head.removeChild(styleLink);
});
</script>

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