命名空间 Bootstrap4 CSS 和 JS 组件答案

【问题标题】：Namespace Bootstrap4 CSS and JS Components命名空间 Bootstrap4 CSS 和 JS 组件
【发布时间】：2018-06-18 04:01:19
【问题描述】：

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

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

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

【问题讨论】：

你有没有为 Bootstrap 4 找到答案？

标签： css bootstrap-4

【解决方案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？）构建脚本中创建一个插件来动态替换构建中的所有类。

【讨论】：

【解决方案2】：

您需要直接修改引导代码，这是如何在 less 中优雅地实现的示例：

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

感谢@raygerrard 在这个问题Add prefixes to CSS class names using LESS or SASS

【讨论】：