[bug report] math.div sass compilation error

[Hallelujah1]

Element UI version

2.15.6

OS/Browsers version

mac

Vue version

2.6.14

Reproduction Link

#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]

Translation of this issue:

Element UI version

2.15.6

OS/Browsers version

mac

Vue version

2.6.14

Reproduction Link

#21019

Steps to reproduce

Syntax Error: SassError: Undefined function.

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

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

node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/popper.scss 33:19 @content
node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/mixins/mixins.scss 83:5 b()

node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/popper.scss 5:1 @import
node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9 @import

node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/select.scss 4:9 @import
node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/pagination.scss 4:9 @import

node_ modules/_ element- [email protected] @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- [email protected] @element-ui/packages/theme-chalk/src/popper.scss 33:19 @content
node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/mixins/mixins.scss 83:5 b()

node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/popper.scss 5:1 @import
node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/select-dropdown.scss 3:9 @import

node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/select.scss 4:9 @import
node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/pagination.scss 4:9 @import

node_ modules/_ element- [email protected] @element-ui/packages/theme-chalk/src/index.scss 2:9 @import
src/styles/element-variables.scss 1039:9

[ckvv]

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]

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

[one-zen]

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

[bbcrBBCR]

me too

[shiyuanzheng]

$ 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!

[cs1707]

2.15.7 版本，将 node-sass 替换成了 dart-sass。如果使用了自定义主题，使用 node-sass 会有问题。

现在 latest 已经指向了 2.15.6。等下次 minor 版本发布之后，latest 会指向最新版本。

[aydk-xcc]

继续使用老版本吧，编译的时候去掉^

"element-ui": "2.15.5",

[woodyang]

npm install [email protected]

[xiaofannet]

你把这个margin-right: math.div($--tooltip-arrow-size, 2); 改为
margin-right: ($--tooltip-arrow-size / 2);

[woodyang]

你把这个margin-right: math.div($--tooltip-arrow-size, 2); 改为 margin-right: ($--tooltip-arrow-size / 2);

这是拉下来的包啊

[PLQin]

看：#21494
解决方法：限制使用2.15.6，^改为~，或者去掉

[aoyoo111]

我的是sass 1.26.2 升级到1.34.0(按照官方git上的版本)一切正常,如下是我的版本配置
"element-ui": "^2.15.7",
"sass": "^1.34.0",
"sass-loader": "8.0.2",

[dotmartin]

This issue is back in v2.15.8. Seems like the division signs have been added back to Theme Chalk.

[lnfel]

我的是sass 1.26.2 升级到1.34.0(按照官方git上的版本)一切正常,如下是我的版本配置
"element-ui": "^2.15.7",
"sass": "^1.34.0",
"sass-loader": "8.0.2",

Can confirm it's working, mine is working with these versions:
"element-ui": "2.15.7",
"sass": "^1.54.4",
"sass-loader": "^12.6.0",