如何开始使用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

1. 确保从nodejs.org安装了节点

   1.1:拥有/usr/local所以你可以在没有sudo的情况下运行npm命令:

   sudo chown -R `whoami` /usr/local

2. 全局安装gulp: npm install gulp -g

3. 在桌面上创建一个文件夹并转到它:cd ~/Desktop && mkdir boot-gulp && cd $_.
4. 启动项目清单:npm init并接受默认值.
5. 安装gulp和gulp-less : npm install gulp gulp-less.
6. 创建一个名为的文件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"));
});

7. 全球安装凉亭: npm install bower -g
8. 用凉亭安装bootstrap: bower install bootstrap
9. 制作less/main.less文件并加载bootstrap.less:

less/main.less

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

10. 运行gulp less,您应该在css文件夹中看到输出.

添加手表

11. 添加gulp-watch插件:npm install gulp-watch
12. 更新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夹中的任何文件,您应该在css文件夹中自动看到输出.

编辑:2014年1月1日

给考拉一试.它实时编译您的LESS文件.它是免费和跨平台的.您可能还想查看有关使用Koala编译Bootstrap的此常见问题解答.

原始答案

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