LESS 不编译答案

【问题标题】：LESS not compilingLESS 不编译
【发布时间】：2016-03-16 15:23:17
【问题描述】：

这是我第一次尝试编写 LESS css 代码，但我似乎无法编译它。我确定我会遗漏一些简单的东西，但我似乎可以找到它。

我的样式声明如下：

<!--Styles & JS-->
<link href='https://fonts.googleapis.com/css?family=Sniglet' rel='stylesheet' type='text/css'>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/theme.less" rel="stylesheet/less" type="text/css"/>

我的 LESS 文件如下所示：

//Theme Colours
@headingcolor: #212d43;
@accentcolor: #005bc4;
@textcolor: #FFF;
@footercolor: #0856a1;

//Theme Fonts
@font: 'Sniglet', cursive;

//Theme Sizes (1980)
@mainfont: 12px;
@h1: @mainfont + 6;
@h2: @mainfont - 1;
@footerlinks: @mainfont - 2;

//Styles
header {
    background: @headingcolor;
    color: @textcolor;
    font: @font @mainfont;
    padding:10px 36px 15px 36px;
}

【问题讨论】：

你用什么编译？
客户端 - 所以使用 CDN JS 文件
CDN JS文件的链接是什么？
LESS 用于开发，您需要在生产中将其编译为 css

标签： css html less

【解决方案1】：

尝试在 js 之前加载样式表。使用您的theme.less，以下代码正在运行：

<body>
    <link href="css/theme.less" rel="stylesheet/less" type="text/css"/> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

    <header></header>
</body>

如果一切正常，您应该会在浏览器控制台中找到如下消息：

less.min.js:13 rendered http://localhost:8000/theme.less successfully.
less.min.js:13 css for http://localhost:8000/theme.less generated in 19ms
less.min.js:13 less has finished. css generated in 20ms

【讨论】：

我正在将 JS 加载到正文的底部，所以它已经在 .less 文件之后但仍然无法正常工作
您可以在此处找到带有代码的最小工作示例：jsbin.com/bavobitutu/edit?html,output - 您的控制台中有任何输出吗？
Nope 没有输出 - 就好像 JS 没有运行一样
请确保为您的网络服务器提供所有正确的权限，我想知道它是否可以读取 .less 文件。您是否还在标记中添加了 <header> 元素？