少 @import 不起作用答案

【问题标题】：less @import not working少 @import 不起作用
【发布时间】：2013-03-05 18:46:44
【问题描述】：

<head>
    <link rel="stylesheet/less" href="less/news.less">
</head>
<body>
    <script src="less.js"></script>
</body>

news.less 看起来像这样；

@import: "libs/base.less"

base.less 看起来像这样；

@import "colors.less";
@import "mixins.less";
@import "bootstap.less";
@import "font-aweseome.less"

body {
    background-color: @light-grey;
}

bootstrap.less 和 font-awesome.less 是带有更改扩展名的 CSS 文件。所有文件都在正确的文件夹中。

在浏览器中查看时，base.less 中的样式被忽略，这意味着我的导入不起作用。

谁能给点建议？

谢谢！

【问题讨论】：

标签： css web less

【解决方案1】：

您的@import 语句必须遵循以下格式：

@import "styles.less";

@import "font-aweseome.less" 不起作用，因为末尾没有分号。

@import: "libs/base.less" 不起作用，因为 import 语句后面有一个冒号。

【讨论】：

【解决方案2】：

为什么要用冒号：

@import: "libs/base.less"

我认为在 @import-s 之后使用分号会更好。

查看控制台以确保路径正确，并且浏览器没有尝试从错误的 url 加载 less 文件。

【讨论】：

【解决方案3】：

试试这个： @import url('你的路径');

【讨论】：

【解决方案4】：

要导入的是

@import "styles.less";

【讨论】：

【解决方案5】：

1.将你的base.less导入news.less之类的，

    @import "libs/base.less";

2.在html中引用你的news.less文件

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

3.在html中引用less.js库

    <script src="lib/less.js"></script>

【讨论】：