css - 将 less 文件导入另一个 less 文件但不包含它的内容

Question

我少了两个文件。一个名为 main.less 的文件导入了 bootstrap.less(其中包括 Bootstrap 变量......等等)和 dash.less，它只有我的仪表板的样式。这两个文件应该生成两个 css 文件。 main.css 和 dash.css。

我将 main.css 包含在我的所有页面中，将 dash.css 包含在仪表板中。

我想做的是:将包含 Bootstrap 变量的 main.less 编译到 main.css 中。然后使用 bootstrap.less 变量将 dash.less 编译到 dash.css 中。然而，这将导致 bootstrap.less 的内容再次包含在我不想要的 dash.css 中，因为我已经在我的 html 中包含了 main.css。

有没有人遇到过这个？

在尝试了几种方法后，我决定使用 grunt 任务来删除重复的 css block 。

Answer 1

找到方法了。我不得不像这样使用导入:

@import (reference) "bootstrap.less";

.myclass{color:@bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}

使用“reference”将获取导入的文件但不包含它。