如何从 bootswatch .less 文件开始重新编译 .css 文件？答案

【问题标题】：How to recompiles .css files starting from bootswatch .less files?如何从 bootswatch .less 文件开始重新编译 .css 文件？
【发布时间】：2014-09-15 08:40:13
【问题描述】：

我成功安装了node和less

我从 bootswatch 'Flatly' 下载了以下两个文件：

现在我想简单地创建最终的 boostrap.css 而不做任何修改，只是为了尝试是否所有内容都与来自同一主题的预煮 bootstrap.css 文件不同。

我试过了

lessc variables.less > bootstrap.css

但是我得到了空的 boostrap.css 文件

我试过了

lessc bootswatch.less > bootstrap.css

但我得到了

NameError: 变量 @navbar-default-bg 在 C:\Users\\Downloads\ bootswatch.less 在第 16 行，第 14 列：15
背景颜色：#fff； 16 色：@navbar-default-bg； 17 }

所以我尝试了这个

lessc variables.css bootswatch.less > bootstrap.css

它没有给我任何错误，但我仍然得到一个空的 bootstrap.css 文件。

有什么方法可以直接使用 less 编译 .css，或者我绝对必须执行自定义 here 中列出的所有步骤？

【问题讨论】：

您还需要下载 Bootstrap Less sources 并一起编译所有这些（例如通过编译像 this 这样的文件（显然使用“flatly”文件而不是“spacelab”））。
感谢这项工作，创建一个常规答案以便我批准它，但是，请复制/粘贴 gist 代码，而不是简单地链接到它

标签： twitter-bootstrap less

【解决方案1】：

获取 Bootswatch 定制的 Bootstrap css 的最简单方法（如果您不想打扰所有 black magic）如下：

少下载引导程序sources
下载对应的Bootswatchvariable.less和bootswatch.less。

使用以下导入创建新文件：

// Set imported file paths to their actual location in your environment
@import "..../bootstrap/less/bootstrap"; // <- Bootstrap  bootstrap.less 
@import "..../.../bootswatch";           // <- Bootswatch bootswatch.less 
@import "..../.../variables";            // <- Bootswatch variables.less

使用lessc（或任何兼容工具）编译此文件。

【讨论】：