Vite+React项目中SCSS引入字体失效问题求助

问题原因 #

在其他SCSS文件中@import字体定义文件时，SCSS会将字体文件的相对路径解析为相对于当前导入文件的路径，而非原fonts.scss文件的路径，导致编译后浏览器找不到字体文件。直接引入编译后的CSS文件时，路径是相对于CSS文件本身的，所以能正常加载字体。

解决方案 #

方案1：使用项目根目录绝对路径

假设字体文件存放在src/assets/fonts/目录下，修改fonts.scss中的字体路径为基于项目根目录的绝对路径：

@font-face {
    font-family: "JosefinSans";
    src: url("/src/assets/fonts/JosefinSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "JosefinSans";
    src: url("/src/assets/fonts/JosefinSans-Bold.ttf") format("truetype");
    font-weight: 700;
}

方案2：配置Vite别名（推荐）

1. 在vite.config.js中配置别名，简化路径引用：

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});

2. 在fonts.scss中使用别名引用字体文件：

@font-face {
    font-family: "JosefinSans";
    src: url("@/assets/fonts/JosefinSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "JosefinSans";
    src: url("@/assets/fonts/JosefinSans-Bold.ttf") format("truetype");
    font-weight: 700;
}

方案3：将字体文件放入public目录

把字体文件移动到项目根目录的public/fonts/文件夹下，修改fonts.scss的路径：

@font-face {
    font-family: "JosefinSans";
    src: url("/fonts/JosefinSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "JosefinSans";
    src: url("/fonts/JosefinSans-Bold.ttf") format("truetype");
    font-weight: 700;
}

以上三种方案任选其一，均可解决SCSS中@font-face字体失效的问题，无需编译成单独CSS文件。

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