如何在Nuxt 3中配置SCSS别名？解决SCSS文件别名解析失败问题

项目结构（仅展示相关文件）：

.
├── .nuxt
├── src
│   ├── @core
│   │   └── scss
│   │       └── _variables.scss
│   └── styles
│       └── _template.scss
├── nuxt.config.ts
└── package.json

nuxt.config.ts中的别名配置：

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  srcDir: 'src/',
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
    '@core': fileURLToPath(new URL('./src/@core', import.meta.url))
  }
});

在Vue文件的<style>标签中使用@forward "@core/scss/variables";可正常运行，但在单独的.scss文件中使用相同代码时，会抛出目录无法解析的错误。当前使用Nuxt 3.8.2版本，已安装sass@1.69.5。

Nuxt的alias配置仅对JS/TS代码、Vue单文件组件的<script>/<template>部分生效，Sass预处理器无法直接识别这些别名，需要单独在Vite的CSS预处理器配置中添加别名映射。

方案一：保留@core别名写法 #

修改nuxt.config.ts，添加Vite的Sass预处理器配置：

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  srcDir: 'src/',
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
    '@core': fileURLToPath(new URL('./src/@core', import.meta.url))
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          importer(url) {
            // 拦截@core开头的路径，替换为实际物理路径
            if (url.startsWith('@core/')) {
              return {
                file: url.replace('@core/', fileURLToPath(new URL('./src/@core/', import.meta.url)))
              }
            }
            return null
          }
        }
      }
    }
  }
});

配置完成后重启Nuxt服务，单独的.scss文件中即可正常使用@forward "@core/scss/variables";。

方案二：简化引用路径 #

如果可以接受调整引用路径，可将src/@core/scss加入Sass的includePaths，直接引用文件名即可：

import { fileURLToPath } from 'node:url'

export default defineNuxtConfig({
  srcDir: 'src/',
  alias: {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
    '@core': fileURLToPath(new URL('./src/@core', import.meta.url))
  },
  css: {
    preprocessorOptions: {
      scss: {
        includePaths: [fileURLToPath(new URL('./src/@core/scss', import.meta.url))]
      }
    }
  }
});

此时在.scss文件中可直接写：

@forward "variables";

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