Vite scss 如何引入本地 字体

Vite scss 如何引入本地 字体

最近在用 Vite 改造一个旧项目 Diary,遇到了好多从 Vue 转到 Vite 的问题。

这次这个问题是: scss 里本地字体引入的问题。

一、问题描述

可以看到下面的卡片字体,本来应该是 impact 的,但现在无法正常展示。

错误提示是这样的:

二、解决

代码还是原来 Vue 时的代码,所以需要改造一下:

我搜到的答案:

vite-ruby isuue 中的问题:

官网说明:https://vite-ruby.netlify.app/config/#watchadditionalpaths

所以我们只需要改一下 scss 里引入字段的部分,另外再在 vite.config.ts 中添加一个路径 resolve 就可以了。

先看一下我的目录结构:

我的 scss 是在 /src/scss, 字体是在 /src/scss/fonts

修改 _fonts.scss 文件

css 复制代码
@font-face {
  font-family: "ImpactDiary";
  src: url(@/scss/fonts/ImpactPureNumber.ttf);
}

@font-face {
  font-family: "JetBrainsMonoDiary";
  src: url(@/scss/fonts/JetBrainsMono-Regular.ttf);
}

@font-face {
  font-family: "Galvji";
  src: url(@/scss/fonts/Galvji.ttf);
  font-weight: normal;
}
@font-face {
  font-family: "Galvji";
  src: url(@/scss/fonts/Galvji-Bold.ttf);
  font-weight: bold;
}

再修改 vite.config.ts 文件,让其能识别 @ 开头的资源,添加 resolve.alias,如下:

js 复制代码
 resolve: {
      alias: {
          '@': resolve(__dirname, 'src'),  // 代码中使用的 @ 符号将被解释为 `/src` 文件夹
      },
 },

完整的 vite.config.ts 文件内容

ts 复制代码
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import svgLoader from "vite-svg-loader"
import { resolve } from 'path'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        svgLoader()
    ],
    resolve: {
        alias: {
            '@': resolve(__dirname, 'src'),  // 代码中使用的 @ 符号将被解释为 `/src` 文件夹
        },
    },
  })

三、结果

现在就显示正常了。

相关推荐
前端开发爱好者1 天前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者1 天前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
BillKu1 天前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391931 天前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_423391931 天前
React Hooks 钩子
前端·javascript·react.js
CUGGZ1 天前
第三代 React,怎么玩?
前端·javascript·react.js
星哥说事1 天前
狂揽82.7k的star,这款开源可视化神器,轻松创建流程图和图表
前端
硅基宙宇AIGC1 天前
阿里Qoder重磅登场:AI编程平台新王者,程序员的饭碗要换了吗?
前端
影i1 天前
跨域登录 / Token 共享 踩坑记录
前端
小爱同学_1 天前
从前端模块化历史到大厂面试题
前端·javascript·面试