12

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

使用lessC编译，我得到一个css文件，但它比bootstrap.css小得多。我应该如何更改其中一个主题的颜色？

万分感谢。

4

3 回答 3

22

Bootswatch Swatchmaker 很棒，但有时您会尝试在更具脚本化的环境中包含 Bootswatch 主题，或者需要更好地了解 Bootswatch 主题是如何组合在一起的。这是我手动编译 Bootswatch 主题的方法。

  1. 从源代码下载 Twitter Bootstrap并解压缩。
  2. 将 Bootswatch 文件移动到文件variables.less夹bootswatch.less，less/替换现有variables.less文件。
  3. 最后bootstrap.less，追加@import "bootswatch.less";.
  4. 编译bootstrap.less。我推荐使用Bootstrap 提供的 grunt 任务。
于 2013-05-04T21:06:40.737 回答
15

Bootswatch Swatchmaker

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

在 GitHub 上的 Bootswatch 存储库中查看Swatchmaker 自述文件以获取更多信息。

完成设置后，只需将要编辑的主题的 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.

于 2012-11-27T18:51:11.357 回答
1

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

我的问题是我只想使用 bootstrap.less 和 variables.less 文件来生成一个新主题，而这种方式只使用了 Bootstrap 发行版中已经开发的 Grunt 任务。我不想安装任何特定于 Bootswatch 的工具来编译新主题。

我已经有一个修改后的构建脚本，它使用路径 /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”行发生了变化。

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

希望这对任何人都有帮助。它不直接回答 OP，因为它是 bootstrap-theme.css 文件而不是 bootstrap.css 文件，但它更符合人们在撰写本文时倾向于使用 Bootstrap 3.2+ 所做的事情。更重要的是，对于那些比较熟悉 LESS 和 Grunt 的人来说，在不覆盖引导目录中的文件的情况下修改构建脚本是一种相当轻松的方式。

于 2014-12-24T17:44:52.393 回答