如何在Nuxt 3中添加全局CSS/SCSS？是否有Nuxt 2类似配置？

Nuxt 3依然保留了类似Nuxt 2的css配置属性，同时也提供了更灵活的实现方式，以下是具体方案：

方法一：通过nuxt.config.ts的css配置项（和Nuxt 2用法一致） #

直接在Nuxt配置文件中指定全局样式文件路径，Nuxt会自动将其注入到所有页面中：

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    // 引入SCSS全局样式
    '@/assets/css/main.scss',
    // 也可引入普通CSS文件
    // '@/assets/css/global.css'
  ]
})

注意：Nuxt 3会自动处理SCSS、LESS等预处理器，只需提前安装对应依赖（如sass）即可，无需额外配置加载器。

方法二：在根组件app.vue中全局引入 #

若需要更灵活的样式控制（比如全局变量、混合宏），可以直接在app.vue的<style>标签中引入：

<!-- app.vue -->
<template>
  <NuxtPage />
</template>

<style lang="scss">
@import '@/assets/css/main.scss';
/* 也可直接在这里编写全局样式 */
body {
  margin: 0;
}
</style>

方法三：借助Nuxt模块自动注入 #

如果使用Tailwind CSS、UnoCSS这类CSS框架，对应的Nuxt模块会自动处理全局样式的注入，无需手动引入样式文件，只需按模块要求完成配置即可。

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