Javascript 使用LESS，如何在单独的字体awome.LESS文件中引用类？ 背景 我使用更少的源代码 我正在使用.less（从Bootstrap.less中引用） 我已经从引导中删除了图标部分，这样它们就不会冲突 我有一个site.less文件，我也从包含一些站点特定样式的引导中引用了它 目标

我希望能够在我的site.css文件中按照以下内容进行操作：

.feedbackItemIconPraise
{
    .icon-thumbs-up; //class included in font-awesome.less
    color:Green;
}

问题 当我尝试上述方法时，我得到以下错误：

这个错误是有道理的；我只是不知道如何在不在我的site.less中创建额外的导入font-awome.less的情况下最好地更正它（我想这是它自己的问题）

澄清：根据下面的评论：我有一个类名，我正在使用一个淘汰视图模型。（例如，如果选择了“表扬”，它将应用“反馈项表扬”类）。如果选择FeedbackItemPremission，我希望它应用font awesome（通过web字体显示图标）中的.icon thumbs up类，然后将颜色设置为绿色

到目前为止我所拥有的 Bootstrap.less定制（仅显示相关零件）：

在site.less中的类：

.feedbackItemIconPraise
{
    .icon-thumbs-up; //class included in font-awesome.less
    color:Green;
}

---

可能还有另一种解决方案，但在通过较少的编译器运行脚本之前，我（自动）将脚本合并到一个文件中。这允许我预先定义变量和混合，可以在我的任何LESS文件中使用

确实提到LESS可以包含

@import

文件，从而使变量和混合可用。您可能需要确保您使用的是最新版本的编译器，如果导入文件是以文件夹结构组织的，您可能需要告诉编译器在哪里搜索

var parser = new(less.Parser)({
    paths: ['.', './lib'], // Specify search paths for @import directives
    filename: 'style.less' // Specify a filename, for better error messages
});

更新 再次查看Font Awesome时，看起来他们现在包含了图标的混音。请参见以下两个文件

使用类似于：

.feedbackItemIconPraise
{
    .icon(@thumbs-up-alt)
    color:Green;
}

起初的 如果您查看font-awesome.less，您将看到该类不存在，它实际上是

。图标竖起大拇指：before

。不幸的是，您不能使用伪类作为混合，例如

您需要修改font-awome.less文件（或者只添加此类，或者直接将
内容：“\f087”
放在需要的地方），这样就有了一个非
：在
版本之前：

.icon-thumbs-up:before            { content: "\f087"; }
.icon-thumbs-up                   { content: "\f087"; }

然后应用这个概念：

.feedbackItemIconPraise {
    font-family: "FontAwesome";
    font-size: 90px;
    padding-top: 7px;

    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;

    &:before {
        .icon-thumbs-up;
    }

}

看起来很棒的图标必须使用
：before
伪字体才能显示出来

演示：
您是否试图从
图标竖起的拇指中导出
feedbackItemIConPlaise
！澄清一下：我有一个类名，我是从一个淘汰的viewmodel中使用的。（例如，如果选择了“表扬”，它将应用“反馈项表扬”类）。如果选择了FeedbackItemProgress，我希望它应用font awesome（通过web字体显示图标）中的.icon thumbs up类，然后将颜色变为绿色。Sohnee：这就是我正在做的，这就是为什么它很奇怪。bootstrap.less文件就是我使用的文件。它导入了font-awome.less和site.less。在site.less中，我指的是font-awome.less中的一个类，所以我希望它能工作，但它不能。@goober我实际上是将它们合并到一个物理文件中，而不是使用
@import
。啊，感谢您的澄清！我读得太匆忙了。我一定会研究这一可能的解决方案。@goober没问题-在答案中添加了一条关于
@import
的注释。Patrick，如果我已经在bootstrap.less文件中同时包含site.less和font-awesome.less，那么在我的site.less文件中也包含font-awesome.less是否会适得其反？似乎这会导致冲突。我已经更新了我的问题，以提供更多信息，这样你就可以看到我是如何安排事情的。对不起，我是个笨蛋。它应该是
@import“font-awesome.less”。坏c+p。请查看我的更新答案。您为什么试图通过LESS文件应用图标？参见第二次编辑。是的，很好。如果静态地将其应用于任何li、div或i元素，它都可以工作。所以我要做的是在less中应用一个类，该类也包含该类，这样我就可以使名称与我的ViewModel保持一致（ViewModel自动生成需要基于所选项应用的类名）。所以我的问题是，如果我引用了bootstrap.less中的所有内容并手动运行，为什么我不能使用less语法来应用位于另一个less文件中的类呢。
.feedbackItemIconPraise {
    font-family: "FontAwesome";
    font-size: 90px;
    padding-top: 7px;

    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-decoration: inherit;

    &:before {
        .icon-thumbs-up;
    }

}