Question

我在这里使用Less CSS。一切都很好，但我现在得到一个小虫子。我有两个文件少。第一个被称为“colors.less”，其中我宣布颜色变量，第二个是css结构。

它是这样的：

color.less

@black: #000;

styles.less

@import "color";

body {
    background: @black;
}

在我的头标记中，我正在写它：

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/>

当然，导入较少的js。

发生的事情是当我将黑色改为白色（#fff）时，它不会变为白色。剧照黑色。当我颠倒逻辑时，导入颜色内部的样式，它会改变，但我的样式不会改变。

我做错了什么？

谢谢你们！

Answer 1

使用

@import "color.less";

这解决了你的问题。如果这不能解决问题，请尝试使用颜色为红色。如果您的浏览器默认颜色为黑色，则无法看到样式是否已加载。

PS：检查你的文件名，如color.less或colorS.less。

Answer 2

LESS使用css语法，因此您需要文件扩展名：

@import "color.less";

Answer 3

您可以在主color中拥有stylesheet，而不是引用第二个sheet吗？

然后你可以跳过@import。

另外，我会为样式rule选择另一个名称。如果您决定更改颜色，则您的规则名称将没有意义。

Answer 4

我不知道是什么导致这种情况，但请尝试引用yout <head>中的两个文件 - 标记如下：

<link rel="stylesheet/less" type="text/css" href="less/styles.less"/>
<link rel="stylesheet/less" type="text/css" href="less/color.less"/>

然后还将style.less更改为不导入color.less，因为您已经在<head> - 标记中执行此操作。

顺便说一句：我不会调用颜色@black，这可能会在以后更改颜色时导致混淆，尝试使用更具描述性的名称，例如@mainBackgoundColor，以获得读取良好的代码太

Answer 5

您导入的任何文件都必须具有.css扩展名。只有包含或检索文件才能具有.less扩展名。

在您的示例中，颜色文件应具有.css扩展名而不是.less。这应该可以解决你的问题。

**更新在Chrome中工作，而不是在Firefox中工作 ??奇怪的。