html - LESS 不起作用

Question

我无法让 less-1.5.1.min.js 工作...这是我试过的文件:

HTML:

<script src="js/less-1.5.1.min.js" type="text/javascript"></script>
<link rel="stylesheet/less" type="text/css" href="less/config.less" />

少

@black:     #000000;
@white:     #ffffff;

和CSS

header {
    background: @black;
}

我已将文件上传到服务器。您可以在这里亲自查看:http://www.battlefield4forum.pl/messenger

谁能告诉我为什么它不起作用？我不知道为什么...

**

编辑:

**

谢谢:)

现在看起来像这样:

site.less

@black:         #000000;
@white:         #ffffff;

header {
    background: @black;

    h2 {
        color: @white;
    }
}

index.html

<!-- Loading LESS -->
<script src="js/less-1.5.1.min.js" type="text/javascript"></script>
<link rel="stylesheet/less" type="text/css" href="less/config.less" />

<!-- Loading CSS -->
<link href="css/style.css" rel="stylesheet">

现在我没有文件 style.css。我理解正确吗？

你仍然可以在这里看到它:http://www.battlefield4forum.pl/messenger

Answer 1

在您的 config.less 中声明的变量将仅在该文件的范围内可用。您在 css/styles.css 中定义的样式根本无法看到这些变量，因为它们是...

A) 在你的 less 文件之前加载

B) 不被视为 less，因此不会被您的客户端 less 处理接收

要修复，将 css/styles.css 文件中的样式移动到 config.less 文件中。您也可以考虑将其命名为 site.less。