网站建设管理工作制度,高端品牌羽绒服有哪些,重庆承越网站建设公司,网站隐私声明模板Vite scss 如何引入本地 字体
最近在用 Vite 改造一个旧项目 Diary#xff0c;遇到了好多从 Vue 转到 Vite 的问题。 这次这个问题是#xff1a; scss 里本地字体引入的问题。
一、问题描述
可以看到下面的卡片字体#xff0c;本来应该是 impact 的#xff0c;但现在无法…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 文件
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如下 resolve: {alias: {: resolve(__dirname, src), // 代码中使用的 符号将被解释为 /src 文件夹},},完整的 vite.config.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 文件夹},},})三、结果
现在就显示正常了。
