编译和保存 bootstrap less答案

【问题标题】：Compiling and saving bootstrap less编译和保存 bootstrap less
【发布时间】：2014-06-10 04:56:55
【问题描述】：

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

对于在 40 个更少的文件中要包含哪些引导程序更少的文件，我有点困惑。目前我包括以下文件来获取引导 css：

为了更改变量值和编译，我正在执行以下操作：

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】：

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 来查看它们。

【讨论】：

如果我编译到服务器端的次数较少，如何根据用户从前端表单（比如任何颜色选择器）的颜色选择将新变量值从我的应用程序中传递到上面的命令行，就像我一样通过java脚本在客户端做。
@Saurabh：哦，我没有意识到变量是动态的！在这种情况下，在用户操作颜色的页面上，您可能会使用您之前使用的技术。当需要保存它时，您将颜色发送到服务器。从那里，您可以选择：您可以让服务器在每个页面上使用less.modifyVars 提供一些JavaScript，插入用户选择的颜色；或者您可以在服务器端编译它并将 CSS 提供给用户。无论哪种方式，您都必须在一定程度上让服务器参与其中，具体程度取决于您的环境的具体情况。
感谢您的回答。我认为我应该避免客户端编译的另一个原因是我的动态 css 不会被浏览器缓存。服务器端编译的任何方法我都必须在我的生产服务器中寻找节点 js 支持。