Bootswatch Swatchmaker

Question

如何从http://bootswatch.com/的variables.less和bootstrap.less文件生成bootstrap.css文件？

使用lessC编译，我得到一个css文件，但这比bootstrap.css小。我怎么能改变其中一个主题的颜色？

非常感谢。

Answer 1

Bootswatch Swatchmaker很棒，但有时候你会尝试在更易编程的环境中包含Bootswatch主题，或者需要更好地理解Bootswatch主题是如何组合在一起的。以下是手动编译Bootswatch主题的方法。

从source下载Twitter Bootstrap并解压缩。
将Bootswatch文件variables.less和bootswatch.less移至less/文件夹，替换现有的variables.less文件。
在bootstrap.less结束时，追加@import "bootswatch.less";。
编译bootstrap.less。我建议使用grunt task provided by Bootstrap。

Answer 2

Bootswatch Swatchmaker

Bootswatch的制造商和维护者Thomas Park制作了一个名为 Swatchmaker 的小工具包，专门用于从Bootswatch定制主题或创建新主题。

查看the Swatchmaker readme in his Bootswatch repo on 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";

然后从lessc swatchmaker.less > bootstrap.css生成 bootstrap.css 。

Answer 3

不确定如何将此作为“补充”答案（@merv已经给出了正确的答案！），但以防它对任何人都有用：

我的问题是我只想使用bootstrap.less和variables.less文件以简单地使用已在Bootstrap发行版中开发的Grunt任务的方式生成新主题。我不想安装任何特定于Bootswatch的工具来编译新主题。

我已经有一个修改过的构建脚本，它使用了来自path / lib / bootstrap的核心引导程序。我认为主题也是lib的一部分，但我给它自己的目录：/ lib / theme

在主题目录中，我放置了从http://bootswatch.com下载的两个文件 - 即“bootswatch.less”和“variables.less”。事实上，这两个文件本身并没有“做任何事情”;他们仍然依赖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”行已经改变。

现在当你运行＆gt; grunt dist（或任何其他相关的grunt任务）它将从新位置获取主题，应用Bootstrap包含文件的相应部分，并生成新主题。

希望这对任何人都有帮助。它没有直接回答OP，因为它是一个bootstrap-theme.css文件而不是bootstrap.css文件，但它更符合人们在撰写本文时对Bootstrap 3.2+的处理方式。更重要的是，对于那些LESS和Grunt所有相对较新的人来说，修改构建脚本而不覆盖bootstrap目录中的文件是一种相当痛苦的方法。

Bootstrap主题 - variables.less - Bootswatch

3 个答案:

Bootswatch Swatchmaker