不兼容的单位：'rem' 和 'px' - Bootstrap 4.3.1

Question

当我在自定义覆盖sass文件中覆盖Bootstrap 4.3.1变量时，出现了"Incompatible units: 'rem' and 'px'"的错误提示。

根据Bootstrap 4文档的指示，我尝试将以下路径放置在自定义sass文件的顶部和底部的最后一行。

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

终端出现错误。

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'.

- Janindu

---

为什么在 CSS 文件中要使用 <br>？ - Nisharg Shah

ignore the <br> - Janindu

你解决这个问题了吗？ - Kiran R

Answer 1

首先需要从SCSS文件中删除<br>，这样就可以解决calc()函数的问题，而不是px或rem的问题。

注意事项

calc()函数是CSS的内置函数，因此每当在SCSS中调用calc()时，需要使用#{}技术来使用变量。

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

现在我给你举一个例子。

$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，此后类似的计算都可以进行。然而，在1em + {random px}这样的计算中，无法进行计算，导致返回未定义并且编译器报错。 calc()可以计算2 * 5px = 10px 或者 2 * 1rem = 32px。

但是calc()无法计算2rem + 1em，1rem + 1px等内容。

- Nisharg Shah