Ответ 1

Swatchmaker Bootswatch

Thomas Park, создатель и сторонник Bootswatch, сделал небольшой набор под названием Swatchmaker специально для целей настройки тем из Bootswatch или создания новых.

За дополнительной информацией обращайтесь к файлу Swatchmaker в своем репозитории Bootswatch на GitHub.

Как только вы получите эту настройку, просто добавьте файлы LESS для темы, которую вы хотите отредактировать, в каталог swatch, отредактировав variables.less с вашими настройками.

Содержимое swatchmaker.less дает достойное резюме того, что он делает:

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

Затем bootstrap.css создается из lessc swatchmaker.less > bootstrap.css.

Ответ 2

Swatchmaker Bootswatch отлично работает, но иногда вы пытаетесь включить темы Bootswatch в более скриптовую среду или лучше понимать, как сочетаются темы Bootswatch. Вот мой метод для вручную компиляции темы Bootswatch.

• Загрузите Twitter Bootstrap из source и распакуйте.
• Переместите файлы Bootclatch variables.less и bootswatch.less в папку less/, заменив существующий файл variables.less.
• В конце bootstrap.less добавьте @import "bootswatch.less";.
• Скомпилировать bootstrap.less. Я рекомендую использовать задачу grunt, предоставленную Bootstrap.

Ответ 3

Не уверен, как это сделать как "дополнительный" ответ (@merv уже дал правильный ответ!), но на всякий случай он полезен для всех:

Моя проблема заключалась в том, что я хочу использовать только файл bootstrap.less и variables.less для создания новой темы таким образом, чтобы просто использовать задачи Grunt, уже разработанные в дистрибутиве Bootstrap. Я не хотел устанавливать какие-либо специфичные для Bootswatch инструменты для компиляции новой темы.

У меня уже есть модифицированная сборка script, которая использует загрузку ядра из path/lib/bootstrap. Я считаю, что тема также является частью библиотеки, но я дал ей ее собственный каталог:/lib/theme

Внутри каталога темы я помещаю два файла, загруженные из http://bootswatch.com - а именно, "bootswatch.less" и "variables. Меньше". Дело в том, что эти два файла сами по себе не делают "ничего"; они все еще полагаются на Bootstrap. Поэтому подключение всего этого означало СОЗДАНИЕ третьего файла, который я назвал "theme.less". Содержимое theme.less описано в разделе @merv выше:

@import "../bootstrap/less/bootstrap.less";
@import "variables.less";
@import "bootswatch.less";
@import "../bootstrap/less/utilities.less";

Ваши пути будут разными, в зависимости от того, как вы структурировали свой проект. Затем в Gruntfile.js(измененном из того, который включен в Bootstrap) вы обнаруживаете объект конфигурации compileTheme и изменяете его, чтобы указать на этот новый файл theme.less:

compileTheme: {
    options: {
      strictMath: true,
      sourceMap: true,
      outputSourceFiles: true,
      sourceMapURL: '<%= pkg.name %>-theme.css.map',
      sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map'
    },
    src: 'lib/theme/theme.less',
    dest: 'dist/css/<%= pkg.name %>-theme.css'
  }

Это изменило только строку "src".

Теперь, когда вы запустите > grunt dist (или любые другие связанные с ним задачи), он поднимет тему из нового местоположения, применит соответствующие части файлов, включенных в Bootstrap, и создаст новую тему.

Надеюсь, что это полезно для всех. Он не отвечает OP напрямую, поскольку это файл bootstrap-theme.css, а не файл bootstrap.css, но он больше соответствует тому, что люди склонны делать с Bootstrap 3.2+ на момент написания этой статьи. И что более важно, для тех, кто является относительным новичком ко всем вещам LESS и Grunt, это довольно безболезненный способ изменить конструкцию script без перезаписывания файлов в каталоге начальной загрузки.