将较少的文件导入到另一个较少的文件，但不包括它的内容

Question

我有两个较少的文件。一个名为main.less的进口bootstrap.less（其中包括bootstrap变量等）和dash.less，它们只有我的仪表板的样式。这两个文件应该生成两个css文件。 main.css和dash.css。

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

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

有没有人遇到过这个？

尝试了几种方法后，我的决定是使用一个咕噜任务来删除重复的CSS块。

Answer 1

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

@import (reference) "bootstrap.less"; 

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

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

Answer 2

将所有较少的文件编译为一个文件将会很好。但是如果你想在dash.less中有bootstrap.less的变量。然后还有一个解决办法，如果你在引导中看到与bootstrap.less少倾，组件明智减档都包含类似 -

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

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

etc.so如果你想使用变量，你可以导入“@import“ variables.less“'在你的'dash.less'多数民众赞成它:)