Question

即使导入scss/_bootstrap.scss清单文件，我也尝试使用Bootstrap的自定义格式范围，尽管它的拇指无法使用。仅当导入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 extension用于Visual Studio并正在编译Bootstrap Sass文件，则需要在editorconfig.json中添加对Autoprefixer的支持：

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

我应该导入什么文件，以便可以使Bootstrap自定义范围设置生效？

1 个答案: