如何在Vite中为Sass的@use语法配置别名？

核心方案：通过Vite的Sass预处理器配置自定义导入解析，同时配合TS/IDE别名识别 #

步骤1：配置vite.config.ts #

在Vite配置文件中，通过自定义importer函数解析Sass文件中的@scss别名，同时复用Vite的resolve别名配置避免重复编写：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// 定义别名映射
const aliasMap = {
  '@scss': path.resolve(__dirname, 'src/scss'),
};

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: aliasMap,
  },
  css: {
    preprocessorOptions: {
      sass: {
        // 自定义Sass导入解析器，处理别名
        importer(url) {
          for (const [alias, targetPath] of Object.entries(aliasMap)) {
            // 匹配@scss/开头的路径
            if (url.startsWith(`${alias}/`)) {
              const resolvedPath = path.resolve(targetPath, url.slice(alias.length + 1));
              return { file: resolvedPath };
            }
            // 匹配直接@scss的情况（如果需要）
            if (url === alias) {
              return { file: targetPath };
            }
          }
          // 不匹配则返回原路径
          return null;
        },
      },
    },
  },
});

步骤2：配置tsconfig.json（支持IDE智能提示） #

为让IDE（如VS Code）识别@scss别名，在tsconfig.json中添加路径映射：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@scss/*": ["src/scss/*"]
    }
  },
  "include": ["src/**/*"]
}

步骤3：验证使用 #

现在可在something.module.scss中直接用别名导入：

@use "@scss/styles";
@use "@scss/abstract/colors" as colors;

.some-class {
  color: colors.$primary;
}

注意事项 #

• 修改配置后需重启Vite开发服务器生效
• 若使用缩进式Sass（.sass文件），需在preprocessorOptions.sass中添加indentedSyntax: true配置

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