无法让 dotLESS @import 工作

Question

我正在努力使用 dotLESS @import 来拥有一个单独的变量文件；我只是经常得到“变量未定义”。

如果我浏览到变量配置文件，它就可以工作；如果我将变量内联在主样式表中，它就可以工作；但在@import 中，没有骰子。我正在将 .css 和 .less 映射到扩展名，但是如果我只使用 .less 它也不起作用。

变量文件LESS-config.less是：

/*
  .LESS VARIABLES
*/
@mbw_dark_cyan: #1293b5;
@mbw_cyan: #11add4;
@mbw_magenta: #e935da;

@control_text: #ffffff;

@action_delete: #ff5400;

@section_level1_bg: @mbw_dark_cyan;
@section_level1_fg: @control_text;

@button_bg: @mbw_dark_cyan;
@button_fg: @control_text;
@button_icon: @control_text;

@data_table_header: @mbw_cyan;

.dummy {
    color: @control_text;
}

呈现为：

/*
  .LESS VARIABLES
*/
.dummy {
  color: #ffffff;
}

调用样式表main.css是：

@import (less) '/css/LESS-config';

button {
    background: @button_bg;
}

这给出了错误：

variable @button_bg is undefined on line 4 in file '/css/main.css':
  [3]: button {
  [4]:     background: @button_bg;
       ----------------^
  [5]: }

正如我所说，如果我用复制和粘贴的相同变量替换导入，一切正常。

我已经尝试在另一个答案中不使用 BOM 进行保存，但这没有帮助。

编辑，我试过了：

• 删除（少）
• 改为双引号
• 使用相对路径LESS-config，而不是上面的虚拟绝对路径
• 将logger="dotless.Core.Loggers.AspResponseLogger" log="debug" 添加到 web.config（cache已经是false）
• 添加debug="1"
• 添加 debug="true"

行为完全没有变化。

编辑2：

我创建了一个只包含 import 语句的精简 css；当我浏览它时，导入的样式就在那里。但是，在刷新时，我只得到一个空白响应。

所以这似乎与我的 IIS 配置/缓存有关？我已经关闭了内容压缩，但没有任何乐趣；禁用 .less 和 .css 的所有输出缓存，仍然没有乐趣！

FIXED 根据 Toni 的评论； https://stackoverflow.com/a/51754771/318411:

结果证明这是一个 dotLESS 问题，在 GitHub 上进行了跟踪：https://github.com/dotless/dotless/issues/553

完整的解决方法是：

1. 将 dotLESS 升级到 1.6.7 版
2. 由于Method not found error，将Microsoft.Extensions.DependencyInjection 降级到1.1.1.0
3. 将导入的文件扩展名从.css更改为.less

现在一切正常。

Answer 1

请尝试版本1.6.7，它修复了导入仅在第一个请求时执行的错误。

Answer 2

我可能发现您有两个问题。

1. 您正试图在 css 文件中调用 @import (less)。这是 less 框架特有的语法。
2. 您的 main.css 不是一个 less 文件。

将您的 main.css 更改为 main.less 文件，现在尝试从 main.less 作为根文件生成您的 css。 假设 LESS-config.less 的导入网址是正确的。 上面提到的更正应该可以解决问题。

Answer 3

@import (less, optional) "mystyle.css"; 是 Less 语法，您不能在 CSS (Less @import Rules) 中使用它。

如果你想在你的CSS中使用@import，它应该遵循这个语法（See here）

@import url|string list-of-mediaqueries;

但是，无论如何，您都不能在 CSS 中导入 Less 文件。

---

我会这样做的方式：

假设您有 3 个 .less 文件：config.less、color.less、header.less

我会创建一个 style.less 文件，其内容如下：

/*------------------------------------------------------------------------------*/
                                   style.less
/*------------------------------------------------------------------------------*/

/* 01. config */
@import "config.less";

/* 02. color */
@import "color.less";

/* 03. header */
@import "header.less";

然后我会编译 style.less 这会产生 style.css 并且我会在我的网站中包含 style.css。