07月15, 2021

vue-cli vue3 element-ui 自定义样式报错

背景

通过 https://element-plus.org/#/zh-CN/component/custom-theme 在项目中改变scss变量,修改完后报错。如下

问题描述

Syntax Error: Invalid CSS after "...#{math": expected express(e.g. 1px bold), was '.div(6, 2)'

问题分析与解决

  1. 排除法定位到sass的math.div语法。对比法猜测sass与node-sass对math.div支持不同。
  2. 将node-sass改为sass包,与element-plus的sass版本对齐。
  3. math.div问题解决,有新的问题报出如下:
  4. 语法兼容问题,将 /deep/ 语法改为 :deep即可。
    Sass Error: expected selector.
    /deep/
    
  5. 如果有在vue.config.js 中配置过addtionalData,也需要修改一下。
    // additionalData: `@import "~@/styles/_variables.scss";`
         prependData: `@import "~@/styles/_variables.scss";`
    
  6. 如果有开启stylelint检查,改成:deep还需要放过校验,可以修改 .stylelintrc文件,增加rule
    "selector-pseudo-class-no-unknown": null
    

    结论

  7. 排除、对比法定位问题
  8. 兼容性问题

TODO

  1. 待了解node-sass 与sass 区别

Refs

https://sass-lang.com/documentation/breaking-changes/slash-div math.div语法发生过变化

本文链接:http://fengbaiyang.cn/post/vue-cli-vue3-element-plus-sass-math-error.html

-- EOF --

Comments

暂不支持评论,如有问题,请发邮件至baiyang.feng@outlook.com。 望不吝赐教~