Импортировать меньше файлов в другой файл меньше, но не включать его содержимое

У меня есть два меньше файлов. один из них main.less, который импортирует bootstrap.less(который включает в себя загрузочные переменные и т.д.) и dash.less, который имеет только стили для моей панели инструментов. Эти два файла должны генерировать два css файла. main.css и dash.css.

Я включаю main.css на все мои страницы и dash.css только на панель инструментов.

То, что я пытаюсь сделать, это: скомпилировать main.less с включенными переменными bootstrap в main.css. Затем скомпилируйте dash.less, используя переменные bootstrap.less в dash.css. Однако это приведет к тому, что содержимое bootstrap.less будет снова включено в файл dash.css, который мне не нужен, потому что я уже включаю main.css в свой html.

Кто-нибудь когда-либо сталкивался с этим?

После нескольких методов мое решение заключалось в том, чтобы использовать задачу grunt для удаления дублирующих блоков css.

Ответ 1

Найден способ. Мне пришлось использовать импорт следующим образом:

@import (reference) "bootstrap.less";

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

Использование "reference" будет импортировать импортированный файл, но не включать его.

Ответ 2

Компиляция всех меньших файлов в один файл будет хороша. Но если вы хотите иметь переменные bootstrap.less в dash.less. Тогда есть одно решение, если вы видите в бутстрапе с меньшим дампом в bootstrap.less, добавляется меньше файлов, например -

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

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

и т.д., если вы хотите использовать переменные, вы можете импортировать переменные @import.less "'в свой" dash.less ", если это:)