命名空间Bootstrap4 CSS和JS组件

Question

是否有任何方法可用作 Bootstrap4 scss构建的一部分，以便为css和js中的每个引导类添加前缀，以避免名称冲突。

我使用过https://github.com/faucamp/bootstrap_namespace_prefixer

但这仅支持基于bootstrap3的css和js文件。

Answer 1

假设您使用SCSS，则可以为整个BS4库添加前缀，例如：

.myprefix {
  @import '~bootstrap.scss';
}

对javascript进行前缀比较困难。我没有尝试过，但是看起来您可以在每个js文件中指定CONST变量以匹配您的前缀： https://github.com/twbs/bootstrap/blob/v4.5.0/js/src/button.js#L23-L25 之后，创建您自己的引导程序index.js，在其中定义所有变量并导入所需的类。或者，在您的（webpack？）构建脚本中创建一个插件，以动态替换构建中的所有类。

Answer 2

Autoprefixer是listed on Bootstrap's website作为4.1.x的兼容工具包。

Answer 3

您将需要直接修改引导程序代码，这是一个可以在更短的时间内轻松实现的示例：

.prefixname {
    &-row { 
        ...
    }  
}

此问题Add prefixes to CSS class names using LESS or SASS中的@raygerrard积分