[bug report] math.div sass compilation error

Hallelujah1 commented 2 years ago

Element UI version

2.15.6

OS/Browsers version

mac

Vue version

2.6.14

Reproduction Link

https://github.com/ElemeFE/element/pull/21019

Steps to reproduce

Syntax Error: SassError: Undefined function. ╷ 33 │ margin-right: math.div($--tooltip-arrow-size, 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/popper.scss 33:19 @content node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/mixins/mixins.scss 83:5 b() node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/popper.scss 5:1 @import node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9 @import node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/select.scss 4:9 @import node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/pagination.scss 4:9 @import node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/index.scss 2:9 @import src/styles/element-variables.scss 1039:9

What is Expected?

编译正常

What is actually happening?

Syntax Error: SassError: Undefined function. ╷ 33 │ margin-right: math.div($--tooltip-arrow-size, 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/popper.scss 33:19 @content node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/mixins/mixins.scss 83:5 b() node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/popper.scss 5:1 @import node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9 @import node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/select.scss 4:9 @import node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/pagination.scss 4:9 @import node_modules/_element-ui@2.15.7@element-ui/packages/theme-chalk/src/index.scss 2:9 @import src/styles/element-variables.scss 1039:9

element-bot commented 2 years ago

Translation of this issue:

Element UI version

2.15.6

OS/Browsers version

mac

Vue version

2.6.14

Reproduction Link

https://github.com/ElemeFE/element/pull/21019

Steps to reproduce

Syntax Error: SassError: Undefined function.

╷ 33 │ margin-right: math.div($--tooltip-arrow-size, 2);

│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵

node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/popper.scss 33:19 @content node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/mixins/mixins.scss 83:5 b()

node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/popper.scss 5:1 @import node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9 @import

node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/select.scss 4:9 @import node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/pagination.scss 4:9 @import

node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/index.scss 2:9 @import src/styles/element-variables.scss 1039:9

What is Expected?

Normal compilation

What is actually happening?

Syntax Error: SassError: Undefined function.

╷ 33 │ margin-right: math.div($--tooltip-arrow-size, 2);

│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵

node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/popper.scss 33:19 @content node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/mixins/mixins.scss 83:5 b()

node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/popper.scss 5:1 @import node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9 @import

node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/select.scss 4:9 @import node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/pagination.scss 4:9 @import

node modules/ element- ui@2.15.7 @element-ui/packages/theme-chalk/src/index.scss 2:9 @import src/styles/element-variables.scss 1039:9

ckvv commented 2 years ago

Me too

 ERROR  Failed to compile with 1 error                                                                                                                                                                                                                               下午3:31:32

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

SassError: Undefined function.
    ╷
490 │ $--group-option-flex: 0 0 math.div(1, 5) * 100% !default;
    │                           ^^^^^^^^^^^^^^
    ╵
  node_modules/element-ui/packages/theme-chalk/src/common/var.scss 490:27      @import
  node_modules/element-ui/packages/theme-chalk/src/common/transition.scss 1:9  @import
  node_modules/element-ui/packages/theme-chalk/src/base.scss 1:9               @import
  node_modules/element-ui/packages/theme-chalk/src/index.scss 1:9              @import
  /Users/chenkai/deep-tech/gcmob-ssp/gcmob-ssp-page/src/assets/style/element-variables.scss 18:9                                                                   root stylesheet

 @ ./src/plugins/element.js 109:0-47
 @ ./src/pages/login/login.js
 @ multi ./src/pages/login/login.js

ckvv commented 2 years ago

@Hallelujah1 需要升级sass版本https://stackoverflow.com/a/67734107/16102996

one-zen commented 2 years ago

sass 采用了新的除法运算符math.div()函数来替代' / ', 这是 sass 1.33.0 版本的新特性(具有破坏性的), 只需要将 sass 版本升级到 1.33.0 及以上版本即可.详情请看 Breaking Change: Slash as Division

bbcrBBCR commented 2 years ago

me too

shiyuanzheng commented 2 years ago

$ npm install -g sass-migrator $ sass-migrator --migrate-deps module --forward=all */.scss

报错 Error: The migrator has found multiple possible migrations for file:///**/node_modules/element-ui/packages/theme-chalk/src/common/var.scss, depending on the context in which it's loaded. Migration failed!