twitter-bootstrap Bootstrap 主题 - variables.less - Bootswatch

Bootstrap Theme - variables.less - Bootswatch

提问by Pratik Poddar

How do you generate bootstrap.css file from the variables.less and bootstrap.less files from http://bootswatch.com/?

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

Compiling using lessC, I get a css file but that is way smaller than bootstrap.css. How am I supposed to change the colour in one of the themes?

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

Thanks a ton.

万分感谢。

回答by Tyler Johnson

Bootswatch Swatchmaker is great and all but sometimes you are trying include Bootswatch themes in a more scriptable environment or need a better understanding of how Bootswatch themes are put together. Here is my method for manuallycompiling a Bootswatch Theme.

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

1. Download Twitter Bootstrap from the sourceand uncompress.
2. Move the Bootswatch files variables.lessand bootswatch.lessto the less/folder, replacing the existing variables.lessfile.
3. At the end of bootstrap.less, append @import "bootswatch.less";.
4. Compile bootstrap.less. I recommend using the grunt task provided by Bootstrap.

1. 从源下载 Twitter Bootstrap并解压缩。
2. 移动Bootswatch文件variables.less，并bootswatch.less在less/文件夹，替换现有variables.less文件。
3. 在 的末尾bootstrap.less，附加@import "bootswatch.less";。
4. 编译bootstrap.less。我建议使用Bootstrap 提供的grunt 任务。

回答by merv

Bootswatch Swatchmaker

Bootswatch 制表师

Thomas Park, the maker and maintainer of Bootswatch, made a little kit called Swatchmakerspecifically for the purposes of customizing themes from Bootswatch or creating new ones.

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

Check out the Swatchmaker readme in his Bootswatch repo on GitHubfor more info.

查看他在 GitHub 上的 Bootswatch 存储库中的 Swatchmaker 自述文件，了解更多信息。

Once you get that set up, just add the LESS files for the theme you want to edit to the swatchdirectory, editing the variables.lesswith your customizations.

完成设置后，只需将要编辑的主题的 LESS 文件添加到swatch目录中，使用您的自定义编辑variables.less。

The contents of the swatchmaker.lessgives a decent summary of what it does:

swatchmaker.less的内容很好地总结了它的作用：

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

Then bootstrap.cssis generated from lessc swatchmaker.less > bootstrap.css.

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

回答by Greg Pettit

Not sure how to do this as a "supplemental" answer (@merv has already given the correct answer!), but just in case it's useful to anyone:

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

My problem was that I want to use just the bootstrap.less and variables.less file to generate a new theme in a way that simply used the Grunt tasks already developed in the Bootstrap distribution. I didn't want to install any Bootswatch-specific tools to compile a new theme.

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

I already have a modified build script that uses the core bootstrap from path /lib/bootstrap. I consider the theme to be a part of the lib as well, but I gave it its own directory: /lib/theme

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

Inside the theme directory, I put the two files downloaded from http://bootswatch.com-- namely, "bootswatch.less" and "variables.less". Thing is, these two files don't really "do anything" by themselves; they still rely on Bootstrap. So hooking it all up meant CREATING a third file, which I called "theme.less". The contents of theme.less are as described by @merv above:

在主题目录中，我放了从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";

Your paths will be different depending on how you've structured your project. Then, in the Gruntfile.js (modified from the one included in Bootstrap), you locate the compileTheme configuration object and modify it to point to this new theme.less file:

根据您构建项目的方式，您的路径会有所不同。然后，在 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'
  }

It's only the "src" line that has changed.

只有“src”行发生了变化。

Now when you run > grunt dist(or any other related grunt tasks) it will pick up the theme from the new location, apply the appropriate parts of Bootstrap's included files, and produce a new theme.

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

Hope that's helpful to anyone. It doesn't answer the OP directly since it's a bootstrap-theme.css file rather than a bootstrap.css file, but it's more in line with what people tend to do with Bootstrap 3.2+ as of this writing. And more importantly, for those who are relative newcomers to all things LESS and Grunt, it's a fairly pain-free way to modify the build script without overwriting files in the bootstrap directory.

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