如何开始使用 LESS 自定义 Bootstrap 3？答案

【问题标题】：How do I get started with customizing Bootstrap 3 with LESS?如何开始使用 LESS 自定义 Bootstrap 3？
【发布时间】：2013-08-31 15:50:37
【问题描述】：

我刚刚从https://github.com/twbs/bootstrap 下载了 Bootstrap 3。我正在看这个教程：http://www.youtube.com/watch?v=I6EPArp4csA。我究竟该如何开始修改 LESS 文件？

我所做的是复制这些目录：LESS、dist/css dist/fonts dist/js 并创建我的新项目。当前项目文件夹如下所示：

css
less
js
index.html

HTML 文件的顶部有这个：

<link rel="stylesheet/less" type="text/css" href="less/my_site.less"/> //only contains @import "bootstrap.less";
<script src="js/less.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

现在，当我尝试修改 variables.less 中的一个变量并使用 SimpLESS 编译它时，会出现语法错误：carousel.less。是什么赋予了？当我注释掉“carousel.less”时，dropdown.less 会出现另一个问题。所以也许它与mixins有关？有人知道我如何开始着手这个工作吗？

【问题讨论】：

您可能想尝试可以实际编译 Boostrap 3 的 WinLESS。
@RubensMariuzzo 在 Mac 上，所以我不能使用 WinLESS，不过我确实在 Bootstrap 2.x 中使用过它，启动它一点也不痛苦。

标签： twitter-bootstrap less twitter-bootstrap-3

【解决方案1】：

编辑：2015 年 1 月 14 日

使用 gulp

确保你已经从 nodejs.org 安装了节点

1.1：拥有/usr/local，因此您可以在不使用 sudo 的情况下运行 npm 命令：

sudo chown -R `whoami` /usr/local
全局安装 gulp：npm install gulp -g
在桌面上创建一个文件夹并转到它：cd ~/Desktop && mkdir boot-gulp && cd $_。
启动项目清单：npm init 并接受默认值。
安装 gulp 和 gulp-less：npm install gulp gulp-less。
创建一个名为 gulpfile.js 的文件并将以下内容粘贴到该文件中：

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");

gulp.task("less", function() {
   gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
});

全局安装 bower：npm install bower -g
用凉亭安装引导程序：bower install bootstrap
制作less/main.less文件并加载bootstrap.less：

less/main.less

@import "bower_components/bootstrap/less/bootstrap.less";
// overrides here
@primary: #000; 
// ...

运行gulp less，您应该会在css文件夹中看到输出。

添加手表

添加gulp-watch插件：npm install gulp-watch
更新gulpfile.js 以查看更少的文件并自动编译为css：

gulpfile.js

var gulp = require("gulp");
var less = require("gulp-less");
var watch = require("gulp-watch"); //+

gulp.task("less", function() {
  watch("less/**/*.less", function(){ //+
    gulp.src("less/main.less")
       .pipe(less())
       .pipe(gulp.dest("css"));
  }); //+
});

现在运行gulp less。它现在正在查看 less 文件夹中的所有 less 文件。进行更改并将任何文件保存在less 文件夹中，您应该会在css 文件夹中自动看到输出。

编辑：2014 年 1 月 1 日

试试Koala。它实时编译您的 LESS 文件。它是免费且跨平台的。您可能还想看看这个关于compiling Bootstrap with Koala.的常见问题解答

原答案

我用你提到的应用程序重现了你的问题。我尝试了另一个应用程序，例如 crunch app，它运行良好。因此，只需将 bootstrap.less 文件拖放到该应用程序中，然后单击应用程序右上角的 crunch file 按钮即可。然后它会问你在哪里保存它。我个人使用命令行工具 assets-packager (npm install -g assets-packager)。我希望这会有所帮助。

【讨论】：

哦，谢谢。有效。 :) 现在我只需要找到一种方法来自动化处理过程。
这就是您需要一个可以监视您的工作的应用程序的关键。我个人使用 yeoman.io，它是一个前端开发工作流管理器及其他。如果您不具备所有要求，安装可能会让您头疼。
天哪，我已经听说过，我很可能会在未来使用它，但首先一步一步，无论如何我只是在构建一个原型。你知道什么好的资源/教程吗？
他们网站上的教程是一个很好的起点（它在主页的底部）
Crunch 需要 adobe air。不要用这样的垃圾软件污染你的系统。上面评论中的 Winless 是要走的路。

【解决方案2】：

这些是我能找到的关于 Bootstrap 3 Less Workflow 的一些更好的教程。

如果你想学少，可以参考这些链接

希望这会有所帮助。

【讨论】：

【解决方案3】：

如果你有php服务器，只需安装lessphp：

lessphp

然后将其添加到您的第一行：

<?php
    require "lessc.inc.php";
    $less = new lessc;
    $less->checkedCompile("stylesheet.less", "stylesheet.css");
?>

您所要做的就是使用您的 less 文件，其余的工作将由 php 完成 =')

【讨论】：