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。是什么赋予了？当我发表评论＆＃34; carousel.less＆＃34;时，另一个问题会出现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 $_。
启动项目清单：npm init并接受默认值。
安装gulp and 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安装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文件夹中的输出。

添加手表

添加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文件夹中的任何文件，您应该会在css文件夹中自动看到输出。

编辑：2014年1月1日

尝试Koala。它实时编译您的LESS文件。它是免费和跨平台的。您可能还想查看有关compiling Bootstrap with Koala.

原始答案

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

Answer 2

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

http://www.helloerik.com/bootstrap-3-less-workflow-tutorial
http://bootstrap.lesscss.ru/less.html

如果您想学习Less，可以参考这些链接

http://lesscss.org（官方少网站）
http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial
http://designshack.net/articles/css/using-less-js-to-simplify-your-css3

希望这会有所帮助。

Answer 3

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

lessphp

然后将其添加到第一行：

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

你需要做的就是使用你的文件较少而php会做其余的事情='）

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

3 个答案:

使用gulp

添加手表

lessphp