twitter-bootstrap - 如何开始使用 LESS 自定义 Bootstrap 3？

Question

我刚刚从 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有关？有人知道我如何开始继续前进吗？

Answer 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 $_ .

启动项目 list :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

使用凉亭安装 Bootstrap :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 文件夹中看到输出。

添加 watch

添加 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 )。我希望这有帮助。