Какие файлы я должен импортировать, чтобы я мог заставить работать Bootstrap с настраиваемым диапазоном?

Question

Я пытаюсь использовать пользовательский диапазон формы Bootstrap, хотя его большой палец не работает, даже если я импортирую файл манифеста scss/_bootstrap.scss.Это работает только тогда, когда dist/bootstrap.css импортируется или я использую CDN.

Это мой файл манифеста для импорта файлов Bootstrap:

// Required abstracts
@import "../../../node_modules/bootstrap/scss/functions";
@import "../../../node_modules/bootstrap/scss/variables";
@import "../../../node_modules/bootstrap/scss/mixins";

/*----------------------------- OPTIONAL -----------------------------*/

// abstract
@import "../../../node_modules/bootstrap/scss/utilities/display";
@import "../../../node_modules/bootstrap/scss/utilities/flex";

// base
@import "../../../node_modules/bootstrap/scss/reboot";
@import "../../../node_modules/bootstrap/scss/type";
@import "../../../node_modules/bootstrap/scss/code";

// layout
@import "../../../node_modules/bootstrap/scss/grid";

//components
@import "../../../node_modules/bootstrap/scss/card";
@import "../../../node_modules/bootstrap/scss/forms";
@import "../../../node_modules/bootstrap/scss/custom-forms";

И это мой HTML-код:

<input id='quantity' 
       class='custom-range' 
       type='range' 
       min='12' 
       max='18' 
       step='2'
       value='12'>

После импорта этих файлов большой палец диапазона не будет стилизоваться должным образом (он сохраняет стиль браузера по умолчанию).

Answer 1

Если вы используете расширение WebCompiler для Visual Studio и компилируете файл Bootstrap Sass, вам необходимо добавить поддержку Autoprefixer в compilerconfig.json:

{
  "outputFile": "wwwroot/css/site.css",
  "inputFile": "wwwroot/css/site.scss",
  "options": {
    "autoPrefix": "last 2 versions"
  }
}