Question

这是我第一次尝试编写一些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;
}

Answer 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

少编译

1 个答案: