主 CSS 文件在 .less 文件编译期间损坏

Question

在 VS 项目中，我们有 3 个文件。

fonts.less：此文件包含如下例所示的字体

@font-face{
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    .custom-font();
}

utility.less：这个文件包含了一些函数。下面给出一个函数

.custom-font() {
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    &:before {
        position: relative;
    }
}

app.less：这是主要的 app less 文件，其中包含所有带有 @import 的 .less 文件的引用，如下所示

// Global App Styles
@import "utility.less";
@import "fonts.less";
and so on ...

app.css：这是主要的应用程序文件。由于我们已经安装了 Bundling and Minification 和 Web Compiler VS extension，所以在保存任何 .less 文件时，所有 .less 文件都会被编译，最终的 CSS 输出会在 app.css 文件中生成。进一步基于捆绑和缩小配置，正在创建 app.min.css 文件，但由于 app.css 文件中生成的代码不正确，此缩小过程失败。在分析时我们发现 app.css 中的以下代码似乎是缩小失败的原因。

@font-face {
    font-family: "Trade Gothic Next";
    src: url("/assets/example.eot");
    font-weight: 400;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-smooth: always;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    : before

{
    position: relative;
}

.custom-font()

函数中编写的代码错误地放置在 app.css 文件中。有没有其他方法可以在不影响最终用户体验的情况下编写此代码？