diff --git a/vue-admin-wonderful-next-docs/docs/config/README.md b/vue-admin-wonderful-next-docs/docs/config/README.md index d62c4a1..8954a02 100644 --- a/vue-admin-wonderful-next-docs/docs/config/README.md +++ b/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/`,键必须以 `/` 斜线开始和结束: diff --git a/vue-admin-wonderful-next/src/assets/style/base/index.scss b/vue-admin-wonderful-next/src/assets/style/base/index.scss index b417e50..976b5c8 100644 --- a/vue-admin-wonderful-next/src/assets/style/base/index.scss +++ b/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; diff --git a/vue-admin-wonderful-next/src/assets/style/element/element-variables.scss b/vue-admin-wonderful-next/src/assets/style/element/element-variables.scss index 39b3a55..d7c7f80 100644 --- a/vue-admin-wonderful-next/src/assets/style/element/element-variables.scss +++ b/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'; diff --git a/vue-admin-wonderful-next/src/assets/style/fonts/element-icons.ttf b/vue-admin-wonderful-next/src/assets/style/fonts/element-icons.ttf new file mode 100644 index 0000000..91b74de Binary files /dev/null and b/vue-admin-wonderful-next/src/assets/style/fonts/element-icons.ttf differ diff --git a/vue-admin-wonderful-next/src/assets/style/fonts/element-icons.woff b/vue-admin-wonderful-next/src/assets/style/fonts/element-icons.woff new file mode 100644 index 0000000..02b9a25 Binary files /dev/null and b/vue-admin-wonderful-next/src/assets/style/fonts/element-icons.woff differ