[Feature Request] Syntax Error: line-height: #{math.div($--input-height - 2, 2)}; ^ Invalid CSS after "...-height: #{math": expected expression (e.g. 1px, bold), was ".div($--input-heigh" in C:\Users\Administrator\WebstormProjects\winn-front\node_ modules\element-plus\packages\theme-chalk\src\input-number.scss (line 142, column 26)

[Wxdddd]

Existing Component

是

Component Name

Element Plus

Description

element-variable.scss file

/* 改变 icon 字体路径变量，必需 */
$--color-primary: #3963bc;
$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";

main.js file
import { createApp } from 'vue'
import app from './app.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'

import '@/assets/style/realize/element-variable.scss'

const App = createApp(app)
// App.config.globalProperties.$ELEMENT = { size: 'small', zIndex: 3000 }
App.use(store)
.use(router)
.use(ElementPlus)
.mount('#app')

Syntax Error:
line-height: #{math.div($--input-height - 2, 2)};
^
Invalid CSS after "...-height: #{math": expected expression (e.g. 1px, bold), was ".div($--input-heigh"
in C:\Users\Administrator\WebstormProjects\winn-front\node_modules\element-plus\packages\theme-chalk\src\input-number.scss (line 142, column 26)

[element-bot]

Translation of this issue:

Existing Component

yes

Component Name

Element Plus

Description

element-variable.scss file

/To change the icon font path variable, you must/
$--color-primary: #3963bc;

$--font-path: '~element-plus/lib/theme-chalk/fonts';
@import "~element-plus/packages/theme-chalk/src/index";

main.js file
import { createApp } from 'vue'

import app from './app.vue'
import router from './router'

import store from './store'
import ElementPlus from 'element-plus'

import '@/assets/style/realize/element-variable.scss'
const App = createApp(app)

// App.config.globalProperties.$ELEMENT = { size: 'small', zIndex: 3000 }
App.use(store)

.use(router)
.use(ElementPlus)

.mount('#app')
Syntax Error:

line-height: #{math.div($--input-height - 2, 2)};
^

Invalid CSS after "...-height: #{math": expected expression (e.g. 1px, bold), was ".div($--input-heigh"
in C:\Users\Administrator\WebstormProjects\winn-front\node_ modules\element-plus\packages\theme-chalk\src\input-number.scss (line 142, column 26)

[y3lousso]

Why was it closed, I encountered the same issue :/

Edit : I found why ^^'
Just replace node-sass by sass (dart-sass)
https://sass-lang.com/documentation/modules/math

[kelvshi]

Because of use dart-sass@v1.33.0; but if you update the dart-sass, you will recive the warnnings "Using / for division is deprecated and will be removed in Dart Sass 2.0.0",
sass/dart-sass#672