Incompatible units: 'rem' and 'px' - Bootstrap 4.3.1

Question

I am getting "Incompatible units: 'rem' and 'px'" when overriding the Bootstrap 4.3.1 variables in a custom override sass file.

I have tried positioning following paths on custom sass file on top of the file and last line of the file as instructed on Bootstrap 4 documentation.

@import "node_modules/bootstrap/scss/functions"; 
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

Error in terminal

ERROR in ./src/scss/main.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/scss/main.scss)

Module build failed: 
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
                                                                                                                                                                 ^
      Incompatible units: 'rem' and 'px'.

Answer 1

Remove <br> from the SCSS file first and this the problem of calc() function not the problem of px or rem.

NOTE

calc() function is the inbuilt function of CSS, so whenever you call calc() in SCSS, you need to use #{} technique to use the variable

height: calc(100% - #{$body_padding})

Now I give you one example

$custom-select-padding-y = 50px;
    
$custom-select-feedback-icon-padding-right: calc((1em +  #{2 * 50px}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;

2 * 50px = 100px and so on after that, it cant calculate 1em + {random px} so, its return undefined and compiler give error.

calc() calculates 2 * 5px = 10px or 2 * 1rem = 32px.

calc() cant calculate 2rem + 1em, 1rem + 1px etc.