我有一个应用程序,其中包含两种样式。这两种样式是独立开发的,然后合并成一个 less 文件。这两种样式都使用 Twitter Bootstrap,通过使用自定义变量的 less 文件来覆盖它。目前它看起来像这样:
.outer { @import "bootstrap.less"; @import "outer-variables.less"; @import "more-outer.less" }
.inner { @import "bootstrap.less"; @import "inner-variables.less"; @import "more-inner.less" }
内部和外部使用不同的字体、颜色、边距等,这些都是在variables.less中自定义的。当然,它们也使用了许多其他规则。
这样做完全没问题,但会在我的CSS中生成两个完整的编译后的bootstrap副本。既然CSS和Less是层叠的,我认为应该有一种方法可以实现相同的效果,但只包含一次bootstrap.less。然而,我无法使其正常工作。有人知道如何解决吗?
以下是我尝试过的:
@import "bootstrap.less"; // doesn't compile, missing vars
.outer { @import "outer-variables.less"; @import "more-outer.less" }
.inner { @import "inner-variables.less"; @import "more-inner.less" }
并且:
@import "bootstrap.less";
@import "outer-variables.less";
@import "inner-variables.less"; // ends up using inner styles everywhere
.outer { @import "outer-variables.less"; @import "more-outer.less" }
.inner { @import "inner-variables.less"; @import "more-inner.less" }
两者都不起作用。正确的做法是什么?