'admin-20.12.14:处理vite中字体图标404的问题'

This commit is contained in:
lyt-Top 2020-12-14 00:02:33 +08:00
parent fb7726ff36
commit b169bb9b41
5 changed files with 26 additions and 5 deletions

View File

@ -179,15 +179,30 @@ Element Plus 的 theme-chalk 使用 SCSS 编写,如果你的项目也使用了
#### 1、element-variables.scss
注意没有 `~` 符号,`@import '~element-plus/packages/theme-chalk/src/index';`
`404问题`[在vite当中使用主题字体路径的 ~ 无法正常解析build和dev均报错](https://github.com/element-plus/element-plus/issues/958)临时处理把字体文件复制到src下了用相对路径引入。
1.1、element-variables.scss
```scss
/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量,必需 */
$--font-path: 'element-plus/lib/theme-chalk/fonts';
@import 'element-plus/packages/theme-chalk/src/index';
```
1.2、页面引入下载的 fonts `(注意路径)`
```scss
@font-face {
font-family: 'element-icons';
src: url('../fonts/element-icons.woff') format('woff'), /* chrome, firefox */
url('../fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-display: $--font-display;
font-style: normal;
}
```
#### 2、配置目录别名 `@`,方便引用
`vite.config.ts` 中,根据需求自己定义。注意写法 `/@assets/`,键必须以 `/` 斜线开始和结束:

View File

@ -1,6 +1,15 @@
@import '../element/element-variables.scss';
@import '../transition/index.scss';
@font-face {
font-family: 'element-icons';
src: url('../fonts/element-icons.woff') format('woff'),
/* chrome, firefox */ url('../fonts/element-icons.ttf') format('truetype'); /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
font-weight: normal;
font-display: $--font-display;
font-style: normal;
}
* {
margin: 0;
padding: 0;

View File

@ -1,6 +1,3 @@
/* 改变主题色变量 */
$--color-primary: #09f;
/* 改变 icon 字体路径变量,必需 */
$--font-path: 'element-plus/lib/theme-chalk/fonts';
@import 'element-plus/packages/theme-chalk/src/index';