使用 Webpack 扩展 Bootstrap答案

【问题标题】：Extending Bootstrap with Webpack使用 Webpack 扩展 Bootstrap
【发布时间】：2017-05-27 15:06:33
【问题描述】：

我正在开发一个 Web 应用程序，该应用程序当前使用 bootstrap 作为其前端，并使用 webpack 来捆绑其资产。我受到this 文章的启发，创建了可以分解成很小的自包含单元的 Web 组件，this 文章试图使我对引导程序的使用更具语义化。

当我尝试将这两种做法结合起来时，问题就出现了，我尝试制作多个 Web 组件，每个组件都扩展了 bootstrap 的功能。通过尝试将 bootstrap 导入这些独立的组件，bootstrap 的样式表最终会在 webpack 生成的最终 css 包中重复多次。

我一直在使用bootstrap-sass，以便我可以访问引导程序的各个组件和变量。这样，我只需要为每个组件导入我需要的功能。但这仍然没有解决重复代码的问题，只是减少了。

理想情况下，webpack 可以配置成所有这些 web 组件都扩展同一个 bootstrap 副本，但我不知道该怎么做。

这是我创建的gist，它演示了这个问题。在运行代码时，它会生成 app.css，其中包含两次重复的引导程序的最终 css。

如何构建我的项目，以便在语义上扩展引导程序，但仍将我的样式表分离为独立的 Web 组件？

【问题讨论】：

标签： webpack web-component semantic-markup bootstrap-sass

【解决方案1】：

我正在做一个具有相同需求的项目。我能做到的最好的事情是：

首先，通过 bootstrap-loader 加载引导程序。这个包可以将 bootstrap 加载到你捆绑的 css 中一次。

假设您也在使用 css-loader，而不是导入引导程序并在每个 sass 中使用 @extend 指令，您可以使用 css composition。例如，假设您希望您的 div 包装器使用引导程序的类 center-block 居中。你可以声明一个语义类 content-wrapper 并且在你的组件的 sass 中你可能有

    .content-wrapper{
      composes: center-block from global;
    }

这种方法的缺点是这样的组合只适用于本地类，而不适用于其他类型的选择器。例如，假设您想根据引导类 btn-primary 设置表单提交按钮的样式。以下规则均无效

    input[type="submit"] {
      composes: btn-primary from global;
    }
    .my-form {
      .my-btn-submit {
        composes: btn-primary from global;
      }
    }

从好的方面来说，我们并不是唯一寻找模块化扩展引导程序的方法的人。您可能想在 github 上检查以下问题。我会链接它们，但似乎我没有足够的声誉来发布两个链接。

【讨论】：