'admin-20.12.14:处理vite中字体图标404的问题'
This commit is contained in:
parent
fb7726ff36
commit
b169bb9b41
@ -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/`,键必须以 `/` 斜线开始和结束:
|
||||
|
||||
|
@ -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;
|
||||
|
@ -1,6 +1,3 @@
|
||||
/* 改变主题色变量 */
|
||||
$--color-primary: #09f;
|
||||
|
||||
/* 改变 icon 字体路径变量,必需 */
|
||||
$--font-path: 'element-plus/lib/theme-chalk/fonts';
|
||||
@import 'element-plus/packages/theme-chalk/src/index';
|
||||
|
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue
Block a user