我正在处理目前使用bootstrap作为前端的网络应用程序,并webpack捆绑其资产。我受到this文章的启发,创建了可以分解为微小的自包含单元的Web组件,以及this文章,试图使我对bootstrap的使用更具语义性。
当我尝试组合这两种做法时,通过尝试制作多个Web组件,每个组件都扩展了bootstrap的功能,就会出现问题。通过尝试将引导程序导入这些独立组件,bootstrap的样式表最终会在webpack生成的最终css包中多次重复。
我特意使用bootstrap-sass,以便我可以访问bootstrap的各个组件和变量。这样,我只需要导入每个组件所需的功能。但是这仍然没有解决复制代码的问题,只能减少它。
理想情况下,webpack的配置方式可以使所有这些Web组件都扩展相同的bootstrap副本,但我无法弄清楚如何操作。
这是我创建的gist,用于演示此问题。运行代码后,它会生成app.css
,其中包含bootstrap的最终css重复两次。
如何构建我的项目以便我可以在语义上扩展引导程序,但仍然将我的样式表分成独立的Web组件?
答案 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上查看以下问题。我会链接它们,但似乎我没有足够的声誉来发布两个链接。