使用另一个文件中的 LESS 类 [Symfony2]答案

【问题标题】：Use LESS class from another file [Symfony2]使用另一个文件中的 LESS 类 [Symfony2]
【发布时间】：2014-06-02 03:26:51
【问题描述】：

我正在开发 Symfony2，我在样式表中使用了 Less。当我尝试使用另一个文件中的类时出现错误：

在我的 main.less 文件中：

.noBorderNoOutline  { border : none !important; outline : none !important; }

在我的 forms.less 文件中，我这样做了：

@import 'main.less';
input, select {
    .noBorderNoOutline();
    width           : 250px;
    height          : 50px !important;        
    box-shadow      : 0 0 2px #555 !important;
    border          : 1px #aaa solid !important;
    padding-left    : 10px;
    margin-bottom   : 10px;
}

我使用lessphp编译less文件和yui压缩器，我的配置是：

    filters:
    yui_css:
        jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
    yui_js:
        jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
    cssrewrite: ~
    lessphp:
        apply_to: "\.less$"
        formatter: "lessjs"
        preserve_comments: true
        presets:
            my_variable: "#000"

文件在同一个包和同一个文件夹中。

在我的 TWIG 模板中：

{% stylesheets filter='yui_css'
      '@MyBundle/Resources/public/css/forms.less'
%}
      <link rel="stylesheet" type="text/css" href="{{ asset_url}}" />
{% endstylesheets %}

我有一个错误：加载资源失败：服务器响应状态为 500（内部服务器错误） 'noBorderNoOutline' 类未定义。

感谢您的帮助。

【问题讨论】：

标签： php css symfony less

【解决方案1】：

如果没有参数，则不需要将 mixin 用作函数。但是，您确实需要将它定义为 main.less 文件中的函数。

这样定义：

.noBorderNoOutline()  { border : none !important; outline : none !important; }

像这样使用它：

input, select {
    .noBorderNoOutline;
    width           : 250px;
    height          : 50px !important;        
    box-shadow      : 0 0 2px #555 !important;
    border          : 1px #aaa solid !important;
    padding-left    : 10px;
    margin-bottom   : 10px;
}

希望这能解决您的问题 :) 祝您好运！

【讨论】：

对不起，我遇到了同样的错误：NameError: .noBorderNoOutline is undefined
你能尝试调试一下是编译器脚本还是实际的less文件？尝试使用 winless 或其他 less 编译器来编译 less 文件并将结果手动包含在项目中。看看它抛出了什么错误。
我尝试在命令行中编译文件：lessc 目录/* > style.css 它工作我没有错误，但在 Symfony 上同样的问题。我不知道你的答案...
这可能是编译器正在采取的步骤的问题，您可以尝试将文件重新排列到一个 all.less 文件中，首先 @imports main.less 然后是 form.less 。然后，您应该从 form.less 中删除 import main.less。然后将生成的 all.css 包含在您的网站中。
是的，它适用于主文件！感谢您的帮助！