无法让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：

我创建了一个压缩css，其中只有import语句；当我浏览到它时，导入的样式就在其中。但是，在刷新时，我只得到一个空白的响应。

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

按照托尼的评论修正了；https://stackoverflow.com/a/51754771/318411

这是一个dotLESS问题，GitHub在这里跟踪：https://github.com/dotless/dotless/issues/553

完整的解决办法是：

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

现在大家都在工作。

Answer 1

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

Answer 2

我可能看到你有两个问题。

1. 您正试图在css文件中调用@import (较少)。这是一种特定于较少框架的语法。
2. 您的main.css不是较少的文件。

将main.css更改为main.less文件，现在尝试从main.less生成css作为根文件。假设LESS-config.less的导入url是正确的。以上提到的修正可能会起作用。

Answer 3

@import (less, optional) "mystyle.css";语法较少，不能在CSS (减@进口规则)中使用。

如果您想在CSS中使用@import，它应该遵循以下语法(看这里)

@import url|string list-of-mediaqueries;

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

我会这么做的：

假设你有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收录在我的网站上。