Несовместимые блоки: 'rem' и 'px' - Bootstrap 4.3.1

Question

Я получаю «Несовместимые единицы:« rem »и« px »» при переопределении переменных Bootstrap 4.3.1 в пользовательском файле переопределения sass.

Я попытался расположить следующие пути в пользовательском файле sass поверх файла и в последней строке файла, как указано в документации по Bootstrap 4.

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

ПРИМЕЧАНИЕ * Функция 1006 * calc() является встроенной функцией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}, поэтому его возвращение не определено, и компилятор выдаст ошибку. calc() вычислит 2 * 5px = 10px or 2 * 1rem = 32px. calc() не могу рассчитать 2rem + 1em, 1rem + 1px и т. Д.