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

vue-admin-wonderful-next-docs/docs/config/README.md

@@ -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/`，键必须以 `/` 斜线开始和结束：
 

vue-admin-wonderful-next/src/assets/style/base/index.scss

@@ -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;

vue-admin-wonderful-next/src/assets/style/element/element-variables.scss

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