css - 我应该导入哪些文件，以便让 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'>

导入这些文件后，范围拇指将不会按预期设置样式（它保持浏览器默认样式）。

标签： csstwitter-bootstrapsassbootstrap-4

Answer 1

如果您使用 Visual Studio 的WebCompiler 扩展并正在编译 Bootstrap Sass 文件，则需要在 compilerconfig.json 中添加对Autoprefixer的支持：

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