围绕 LESS 中@import行为的混淆，使用 Codekit

Question

目前正在使用Bootstrap，使用Codekit编译，并且还有一个单独的样式。

在变量中：

@blue: #0096EF;

在风格上，我有以下内容：

.title-text {color: @blue;}
@import: "variables.less";

在 bootstrap.less 中：

@import: "style.less";
@import: "variables.less";

我这样做对吗？在我看来，当编译引导程序时，它会导致变量发生两次。

Answer 1

您应该能够在引导程序中导入变量.less一次作为第一个导入实例，并且不要在实际样式中第二次包含它。因为你的假设是正确的，它将再次导入变量。这意味着您将在两个位置导入相同的变量。

附言：只要在访问变量本身之前导入定义要使用的变量的变量，就可以了。

@color-black: #000;
.color {
      color: @color-black;
}

Answer 2

我发现这也是一个Codekit问题，因为我正在使用Codekit编译更少的文件。

溶液：

1. 创建 style.less 并按预期对其进行编辑，引用变量@blue（未在当前文档中声明）
2. 保存时，Codekit 返回编译错误，这是由于 style.less 中未声明的变量。忽略该错误。
3. 在引导中，无@import风格，无
4. 保存引导程序，编译没有问题
5. 调用引导.css在 html 文档中

顺便说一下，我在步骤 2 和 3 之间遇到了一个 Codekit 错误。在步骤 2 之后，Codekit 不再监视或编译任何内容。为了解决这个问题，我需要删除监视的项目，然后将其重新添加到 Codekit。