Question

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

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

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

有没有人遇到过这个？

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

Answer 1

找到了办法。我不得不像这样使用import：

@import (reference) "bootstrap.less";

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

使用＆＃34;参考＆＃34;将导入导入的文件，但不包括它。

Answer 2

将所有较少的文件编译到一个文件将是好的。但是如果你想在dash.less中拥有bootstrap.less的变量。然后有一个解决方案，如果你在bootstrap中看到bootstrap.less中的dump更少，那么组件就会包含更少的文件，如 -

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

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

等。如果你想使用变量，你可以导入＆＃39; @import＆＃34; variables.less＆＃34;＆＃39;在你的'dash .less＆＃39;多数民众赞成：）

将较少的文件导入另一个较少的文件但不包含其内容

2 个答案: