Question

我正在从B4 alpha迁移到beta，我的自定义选择控件现在显示自定义插入符号和浏览器默认插入符号。试图找出可能带回浏览器默认值的内容（在我测试过的所有浏览器中）。这是我的标记：

<div id="memberGroup" class="form-group row">
  <label for="memberType" class="col-sm-3 col-form-label">Member Type</label>
  <div class="col-sm-9">
    <select class="form-control custom-select" required="required" id="memberType" name="memberType">
      <option value="" selected="selected">Select...</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>

我删除了所有自定义样式和变量覆盖，仍然看到两组插入符号。有什么想法吗？

Answer 1

如果您正在编译Bootstrap Sass并且正在使用Webpack，请确保在Autoprefixer插件中不仅包括sass-loader，而且还包括postcss-loader。

https://getbootstrap.com/docs/4.3/getting-started/webpack/#importing-styles

Autoprefixer通过CSS查找并在需要的地方添加供应商前缀。没有这些，您可能会看到UI出现某些组件故障。

作为参考，以下是我的Webpack配置中的相关摘录：

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          // Precompiling Sass requires postcss-loader with Autoprefixer
          {
            loader: 'postcss-loader',
            options: {
              plugins: function() {
                return [
                  require('autoprefixer'),
                ];
              },
            },
          },
          {
            loader: 'sass-loader',
          },
        ],
      },
    ],
  },
};

Answer 2

这似乎仍然是Bootstrap 4.3.x中的问题。

如果您有一个自定义的主bootstrap.scss文件，并且正在使用其他编译器（如Visual Studio中的Web编译器），则好像您在顶部导入已编译的bootstrap.css文件以获取供应商前缀一样。

因此在您的自定义.scss文件中：

/* My customized Boostrap file */

@import "../dist/css/bootstrap.css"; // Gets any vendor prefixes

@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
...

Bootstrap 4-beta自定义选择控件显示自定义和默认插入符号

2 个答案: