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

Question

我有两个.less文件，一个名为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块。

- astroanu

---

为什么不将它们编译成一个文件？这样做有许多好处（其中之一是 - 减少了从服务器获取所有样式的往返次数）。 - vlio20

Answer 1

找到了一种方法。我必须像这样使用 import：

@import (reference) "bootstrap.less";

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

使用"reference"会引用导入的文件但不包含它。

- astroanu

---

这真是太棒了。 - Neurotransmitter

Answer 2

将所有的less文件编译成一个文件会更好。但是如果您想在dash.less中使用bootstrap.less的变量，则有一个解决方案。如果您查看bootstrap与less dump中的bootstrap.less，会发现按组件划分的less文件已被包含。

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

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

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

- BhagyashriK

---

我已经尝试了简单的导入，但它没有达到我的预期。请查看我的回答。 - astroanu

@astro 谢谢，我之前不知道这个 :) - BhagyashriK

嘿，我不太明白你想做什么，但是导入“variables.less”也允许您在variables.less中使用变量。 - BhagyashriK

但它不会导入 bootstrap.less 中定义的任何类，对吧？而我正在我的 less 文件中使用它。请查看我的更新答案。 - astroanu

哦，好的。但是你问的问题是关于使用变量而不是类的。无论如何，谢谢，我之前真的不知道引用这个东西。我已经投票支持你的答案了 :) - BhagyashriK