使用Webpack扩展Bootstrap

时间:2017-01-12 13:23:27

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

我正在处理目前使用bootstrap作为前端的网络应用程序,并webpack捆绑其资产。我受到this文章的启发,创建了可以分解为微小的自包含单元的Web组件,以及this文章,试图使我对bootstrap的使用更具语义性。

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

我特意使用bootstrap-sass,以便我可以访问bootstrap的各个组件和变量。这样,我只需要导入每个组件所需的功能。但是这仍然没有解决复制代码的问题,只能减少它。

理想情况下,webpack的配置方式可以使所有这些Web组件都扩展相同的bootstrap副本,但我无法弄清楚如何操作。

这是我创建的gist,用于演示此问题。运行代码后,它会生成app.css,其中包含bootstrap的最终css重复两次。

如何构建我的项目以便我可以在语义上扩展引导程序,但仍然将我的样式表分成独立的Web组件?

1 个答案:

答案 0 :(得分:2)

我正在开发一个具有相同需求的项目。我设法做到的最好是:

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

假设您还在使用 css-loader ,而不是在每个sass中导入bootstrap并使用 @extend 指令,您可以使用css composition。例如,假设您希望使用bootstrap的类 center-block 来使div包装器居中。你可以声明一个语义类 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上查看以下问题。我会链接它们,但似乎我没有足够的声誉来发布两个链接。

  • github.com/shakacode/bootstrap-loader/issues/12
  • github.com/shakacode/bootstrap-loader/issues/9
  • github.com/css-modules/css-modules/issues/109