webpack转vite踩坑记录——配置elementui个性化主题

本文章记录vite项目里配置elementui自定义主题的过程。

项目背景：原项目基于vue2+webpack3，升级成使用vite3打包

1 新建样式文件.scss

参考element官网自定义主题教程： element.eleme.cn/#/zh-CN/com…；

在assets文件夹下新建样式文件elementui.scss

/* 改变主题色变量 */ 
$--color-primary: teal; 
/* 改变 icon 字体路径变量，必需 */ 
$--font-path: '~element-ui/lib/theme-chalk/fonts'; 
@import "~element-ui/packages/theme-chalk/src/index";

2 在vite.conf.js引入样式文件

安装sass sass-loader

在vite.conf.js添加配置文件

 css: {
      preprocessorOptions: {
        less: {
          javascriptEnabled: true,
        },
        scss: {
          additionalData: '@import "@/assets/css/elementui.scss";'
        }
      }
    },

3 修改element-variables.scss文件

引入方式中~改为node_modules里element-ui路径

/* 改变主题色变量 */
$--color-primary: #597ef7;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '../../../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../../../node_modules/element-ui/packages/theme-chalk/src/index";