У меня есть два меньше файлов. один из них 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.
Найден способ. Мне пришлось использовать импорт следующим образом:
@import (reference) "bootstrap.less";
.myclass{color:@bootstrap-variable;}
.anotherclass{.classDefinedInBootstrapLessWhichUsesAVariableDefinedInVariablesLess}
Использование "reference" будет импортировать импортированный файл, но не включать его.
Компиляция всех меньших файлов в один файл будет хороша. Но если вы хотите иметь переменные 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 ", если это:)