Nuxt3项目目录别名配置及多场景使用方法求助

首先纠正核心错误 #

你配置的别名是@scss，但引用时写成了@sass，拼写不一致直接导致失效，这是首要问题。

正确的别名配置方式 #

以下两种配置均有效，任选其一即可：

方式1：使用Nuxt内置路径别名（推荐）

直接用~/指代项目根目录，无需额外引入模块：

export default defineNuxtConfig({
  alias: {
    '@scss': '~/assets/scss'
  }
})

方式2：使用Node.js路径模块解析

如果需要更严谨的绝对路径解析，可采用这种方式：

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

export default defineNuxtConfig({
  alias: {
    '@scss': join(__dirname, 'assets/scss')
  }
})

不同场景下的别名使用方法 #

1. JavaScript/TypeScript代码中使用

直接通过别名导入文件：

// 导入SCSS变量文件
import styles from '@scss/variables.scss'

// 导入工具函数文件
import { mixColor } from '@scss/utils.js'

2. Vue模板中使用

模板中可直接用别名引用静态资源，或结合Nuxt的$alias全局变量：

<template>
  <!-- 直接使用别名 -->
  <img src="@scss/icons/logo.svg" alt="品牌Logo" />
  
  <!-- 或通过$alias变量拼接路径 -->
  <img :src="`${$alias['@scss']}/icons/avatar.svg`" alt="用户头像" />
</template>

3. CSS/SCSS样式中使用

在<style>标签里直接使用别名，无需加~前缀：

<style lang="scss">
// 导入SCSS变量或工具类
@use '@scss/variables';
@use '@scss/mixins';

.container {
  background-color: variables.$bg-primary;
  @include mixins.flex-center;
}
</style>

额外优化：全局自动导入SCSS资源 #

如果某个SCSS文件（比如全局变量、混合宏）需要在所有组件中直接使用，无需手动@use，可以在Nuxt配置中添加全局导入：

export default defineNuxtConfig({
  alias: {
    '@scss': '~/assets/scss'
  },
  css: [
    '~/assets/scss/variables.scss',
    '~/assets/scss/mixins.scss'
  ]
})

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