sass - 不兼容的单位 : 'rem' and 'px' - Bootstrap 4. 3.1

Question

在自定义覆盖 sass 文件中覆盖 Bootstrap 4.3.1 变量时，我收到“不兼容的单位:‘rem’和‘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'.

Answer 1

删除 <br>首先从SCSS文件开始，这是calc()的问题功能不是px or rem的问题.
笔记calc() function 是 CSS 的内置函数，所以无论何时你调用 calc()在 SCSS 中，您需要使用 #{}使用变量的技术

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}所以，它的返回 undefined 和编译器给出错误。 calc()计算 2 * 5px = 10px or 2 * 1rem = 32px . calc()无法计算 2rem + 1em , 1rem + 1px等等。