编译和保存bootstrap更少

时间:2014-06-10 04:56:55

标签: javascript html css twitter-bootstrap less

我正在尝试使用较少的js编译bootstrap less文件并尝试将已编译的css文件保存到我的服务器根文件夹。

我对40个较少文件中包含哪些bootstrap较少的文件感到有点困惑。 目前我包含以下文件来获取bootstrap css:

  1. bootstrap.less
  2. variables.less
  3. 为了更改变量值和编译,我正在做以下事情:

    HTML:

    <body>
    <div class="bg-primary"style="width:100%;height:100px"></div>
        <a class="btn btn-primary" onclick="generatecss();"> compile </a>
    </body>
    

    JS:

    function generatecss() {
        less.modifyVars({
            '@brand-primary': '#5cb85c'
        });
    }
    

    执行上面的js函数后,就会正确编译less来改变品牌原色。但我的问题是如何将这个新编译的文件保存到我的服务器根目录。

1 个答案:

答案 0 :(得分:2)

LESS通常不是从浏览器编译的,而是从lessc的命令行编译的。安装完成后(可能使用NPM),您应该可以使用

之类的东西编译Bootstrap
% lessc bootstrap/less/bootstrap.less my-bootstrap.css

然后您只需要分发结果my-bootstrap.css - 无需提供LESS来源。

如果要像修改JavaScript代码那样修改该变量,可以编辑Bootstrap的variables.less或传递另一个命令行选项:

% lessc --modify-var='brand-primary=#5cb85c' bootstrap/less/bootstrap.less my-bootstrap.css

lessc可以采取其他选项 - 尝试lessc --help来查看它们。