将 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 中，因为我已经将 main.css 包含在我的 html 中。

有没有人遇到过这个？

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

Answer 1

将所有less文件编译为一个文件会很好。但是如果你想在dash.less中有bootstrap.less的变量。然后有一个解决方案，如果您在 bootstrap 中看到 bootstrap.less 中有较少的转储，则包含组件明智的较少文件，如 -

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Reset
@import "normalize.less";
@import "print.less";

etc.so 如果你想使用变量，你可以在你的 'dash.less' 中导入 '@import "variables.less"' 就是这样:)

Answer 2

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

@import (reference) "bootstrap.less";

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

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

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

import less file to another less file but not include it's content

css

less

twitter-bootstrap