I've been working with SCSS to customize the style of Bootstrap 4 for my project, but I encountered an error while compiling my SCSS code:
{
"status": 1,
"file": "H:/!WEBSITE/modules/The Force - Bootstrap/content/scss/variables/variables.scss",
"line": 330,
"column": 34,
"message": "Incompatible units: 'px' and 'px*px'.",
"formatted":
"Error: Incompatible units: 'px' and 'px*px'.
on line 330 of scss/variables/variables.scss
>> $input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;"
}
Details of my variables:
$font-size-base: 14px !default;
$line-height-base: 1.846 !default;
$input-line-height: floor(($font-size-base * $line-height-base)) !default;
$input-padding-y: 6px !default;
The problematic line causing the error:
$input-height: (($font-size-base * $input-line-height) + ($input-padding-y * 2)) !default;
I'm struggling to understand why this issue is occurring and how to resolve it. I use node-sass for compiling SCSS, and although I haven't faced such errors before, I can't seem to pinpoint the exact cause in this scenario.