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语句的cut-down css;当我浏览它时，导入的样式就在那里。但是，在刷新时，我只是得到一个空白的回复。

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

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

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

完整的修复方法是：

将dotLESS升级到版本1.6.7
由于Microsoft.Extensions.DependencyInjection

Method
not found error

将导入的文件扩展名从.css更改为.less

现在一切正常。

Answer 1

请尝试使用1.6.7版，该版本修复了仅在首次请求时才执行导入的错误。

Answer 2

I potentially see two problems that you have.

You are trying to call @import (less) in a css file. This is a syntax specific to less framework.
Your main.css is not a less file.

Change your main.css to a main.less file and now try generating your css from main.less as your root file. Assuming your import url for LESS-config.less is correct. The above mentioned corrections should probably do the trick.

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.css 的 style.less ，然后在我的网站中加入 style.css 。

无法获得dotLESS @import工作

3 个答案: