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` 文件夹
        },
    },
  })

三、结果

现在就显示正常了。

相关推荐
真的想不出名儿22 分钟前
vue项目引入字体
前端·javascript·vue.js
胡楚昊40 分钟前
Polar WEB(1-20)
前端
吃饺子不吃馅1 小时前
AntV X6图编辑器如何实现切换主题
前端·svg·图形学
余防2 小时前
XXE - 实体注入(xml外部实体注入)
xml·前端·安全·web安全·html
jump_jump2 小时前
前端部署工具 PinMe
运维·前端·开源
Baklib梅梅2 小时前
优秀文档案例解析:打造高效用户体验的最佳实践
前端·ruby on rails·前端框架·ruby
慧一居士2 小时前
VUE、jquery、React、Ant Design、element ui、bootstrap 前端框架的 功能总结,示例演示、使用场景介绍、完整对比总结
前端
GISer_Jing3 小时前
0926第一个口头OC——快手主站前端
开发语言·前端·javascript
MediaTea4 小时前
Jupyter Notebook:基于 Web 的交互式编程环境
前端·ide·人工智能·python·jupyter
少年阿闯~~4 小时前
CSS——重排和重绘
前端