阅读 1346

解决vue3使用element-plus(element+)主题的坑

此前一直在使用react,最近要求换到vue框架,那就直接vue3吧!关于vue3的ui库我选择element-plus,使用了ui库又怎么能少得了主题的配置!然后,坑出现了。。。

这篇文章本应在7月就发布了,拖更太久了。今天补上吧,希望能帮助到遇到该问题的人

回顾问题

1.首次遇到问题是在生产环境的时候,element的图标发生了乱码的情况!

答案:网上很快就查到了问题的解决办法。卸载项目中的dart-sass依赖,重新安装node-sass依赖即可。

2.线上乱码的问题解决了,新的问题又来了,我项目跑不起来了!

答案:

赶紧看一下报错,如图:

error  in ./src/assets/styles/element-variables.scss

Syntax Error: SassError: Invalid CSS after "...-height: #{math": expected expression (e.g. 1px, bold), was ".div($--input-heigh"
        on line 142 of node_modules/element-plus/packages/theme-chalk/src/input-number.scss
        from line 13 of node_modules/element-plus/packages/theme-chalk/src/index.scss
        from line 3 of /Users/yzy/Desktop/workSpace/vue-test/src/assets/styles/element-variables.scss
>>       line-height: #{math.div($--input-height - 2, 2)};

   -------------------------^
复制代码

通过报错,我们可以得知问题出在方法math上。

那有思路了,我们去看看node-sass是怎么解释的,如图:

nodeSass.png

恍然大悟,原来node-sass的sass处理库是LibSass

那我们再来看看LibSass库是否支持math方法

sass_math.png

很是遗憾,不支持!

这可咋整呢?于是我在element-plus的issues中找到了解决方法,版本降低到1.0.2-beta.30就可以了

3.看似是解决了,但是我不想降低版本!那只有一个办法了,避开scss,直接用css!

答案:直接给出解决步骤

安装:

yarn add element-themex element-theme-chalk -D
复制代码

备注:为什么没有按照官方文档安装element-theme,因为node12或者更高版本使用element-theme时会报错【et -i报错“primordials is not defined”】。具体参看github上的github.com/ElementUI/e…。这是一个遗留了两年的问题,官方未解决

执行命令【在根目录下】

node_modules/.bin/et -i
复制代码

此时根目录下会生成一个element-variables.scss,修改里面的变量值

执行命令【在根目录下】

node_modules/.bin/et
复制代码

执行node_modules/.bin/et命令后,会在执行命令的路径下自动生成一个theme文件夹,文件夹下包含了element的所有样式。(如果上面命令不是在src文件夹执行的,那就把theme文件夹移到src即可)

最后,在main.ts下引入即可(import "@/theme/index.css")

结尾

这是一篇短小精干的问题解决文章,希望能帮助到有需要的人

文章分类
前端