如何在Nuxt 3中使用Sass？求文档及Vite配置解决方案

1. 安装必要依赖 #

Nuxt 3内置支持Sass/SCSS，但需要先安装预处理器依赖：

# 使用npm
npm install sass --save-dev

# 使用yarn
yarn add sass --dev

# 使用pnpm
pnpm add sass -D

2. 基础使用方法 #

• 单文件组件中直接使用：在.vue文件的<style>标签中指定lang="scss"即可：

  <template>
    <div class="container">Hello Nuxt 3</div>
  </template>
  
  <style lang="scss">
  .container {
    padding: 2rem;
    background-color: $primary-color;
  }
  </style>
  

• 全局导入样式/变量：如果需要在所有组件中共享全局样式或Sass变量，可在nuxt.config.ts的css数组中配置：

  export default defineNuxtConfig({
    css: ['~/assets/styles/global.scss', '~/assets/styles/variables.scss']
  })
  

3. 解决Vite SCSS配置加载问题 #

你不需要直接修改Vite的原生配置文件，Nuxt 3已经封装了Vite的配置入口，可通过nuxt.config.ts中的vite选项传递SCSS预处理器配置：

export default defineNuxtConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          // 全局注入变量/混合宏，无需每个文件手动导入
          additionalData: '@use "~/assets/styles/variables.scss" as *;'
        }
      }
    }
  }
})

如果遇到配置不生效的情况，检查以下几点：

• 确认已安装的是sass（dart-sass）而非已废弃的node-sass
• 检查文件路径是否正确（使用~/指向项目根目录）
• 重启Nuxt开发服务器，确保配置生效

官方文档参考 #

Nuxt官方文档的「Styling」章节包含了Sass/SCSS的完整使用指南，涵盖依赖安装、全局样式管理、预处理器高级配置等内容，可在官方文档中搜索「Sass」获取详细说明。

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