vite vue3项目中加载本地字体

Question

在main.scss我从文件夹加载本地字体assets/styles/fonts：

@font-face {
  font-family: 'Opensans-Bold';
  font-style: normal;
  src: local('Opensans-Bold'), url(./fonts/OpenSans-Bold.ttf) format('truetype');
}
@font-face {
  font-family: 'Opensans-Light';
  font-style: normal;
  src: local('Opensans-Light'), url(./fonts/OpenSans-Light.ttf) format('truetype');
}

然后在vite.config我加载main.scss：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "@/assets/styles/main.scss";`
    }
  }
},

但是main.scss除了字体之外的所有 css 都被应用，我收到错误：

downloadable font: download failed (font-family: "Opensans-Bold" style:normal weight:400 stretch:100 src index:1): status=2152398850 source: http://localhost:3000/fonts/OpenSans-Bold.ttf

我走在正确的轨道上还是需要其他方法（与 Vue-CLI 类似）？

Answer 1

这是正确的方法，解决方案是相对路径，因此：

src: local('Opensans-Bold'), url(@/assets/styles/fonts/OpenSans-Bold.ttf) format('truetype');

并在以下位置设置别名vite.config.js：

resolve: {
  alias: {
    '@': path.resolve(__dirname, 'src'),
  }
}