css - 更少的 CSS 导入问题

Question

我在这里处理较少的 CSS。一切都很好，但我现在遇到了一个小错误。我有两个更少的文件。第一个称为“colors.less”，我在其中声明了颜色变量，第二个是 css 结构。

它是这样的：

无色

@black: #000;

样式.less

@import "color";

body {
    background: @black;
}

在我的头标签中，我写了它：

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

当然，导入 less js。

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

我做错了什么？

多谢你们！

score 5 · Accepted Answer

采用

@import "color.less";

这可以解决您的问题。如果这不能解决问题，请尝试在您的 color.less 中使用红色，因为如果您的浏览器默认颜色为黑色，您将看不到样式是否未加载。

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

score 2 · Accepted Answer

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

@import "color.less";

score 0 · Accepted Answer

您可以color在主要内容中stylesheet而不引用第二个内容sheet吗？

然后你可以跳过@import.

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

score 0 · Accepted Answer

我不知道是什么原因造成的，但请尝试在 yout <head>-tag 中引用这两个文件，如下所示：

<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>-tag 中执行此操作。

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

score -6 · Accepted Answer

无论您要导入什么文件，都必须具有 .css 扩展名。只有包含或检索的文件可以具有 .less 扩展名。

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

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

5 回答 5