vite集成element-plus修改主题色报错以及字体路径404的问题

注意

[aru_39]到目前为止,Vite还不是一个非常成熟的工具,使用它的风险你得自己承担

正文

使用vite搭建的vue3项目, 修改element主题色,创建element-variables.scss

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-plus/lib/theme-chalk/fonts';

@import "~element-plus/packages/theme-chalk/src/index";

网页报错

Error: Can't find stylesheet to import.
  ╷
7 │ @import "~element-plus/packages/theme-chalk/src/index";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

那是因为~是在vue-cli中配置的约定别名。在Vite中没有这样的东西。

[aru_20]

简介办法

~改成node_modules/

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: 'node_modules/element-plus/lib/theme-chalk/fonts';

@import "node_modules/element-plus/packages/theme-chalk/src/index";

改完之后字体路径依旧404  [aru_58]

最后再element-plus仓库看到了这条issue: 在vite当中使用主题，字体路径的 ~ 无法正常解析，build和dev均报错

把字体文件从node_modules/element-plus/lib/theme-chalk/fonts复制到项目目录下了用相对路径引入,这样是可以用了  暂时没有其他更优解

最终:

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '../assets/fonts'; // 写你放字体的文件夹

@import "node_modules/element-plus/packages/theme-chalk/src/index";