1

私はSymfony2でウェブサイトを構築していて、このようにLessを使用しています

index.html.twig:

{% stylesheets
    '@AcmeWebappBundle/Resources/public/css/website.less'
    filter='?yui_css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

config.yml:

assetic:
    filters:
        lessphp:
            file: %kernel.root_dir%/../vendor/lessphp/lessc.inc.php
            apply_to: "\.less$"

今、ファイルwebsite.lessは大きく成長していたので、次のように別のファイルに分割することにしました。

{% stylesheets
    '@AcmeWebappBundle/Resources/public/css/mixins.less'
    '@AcmeWebappBundle/Resources/public/css/general.less'
    '@AcmeWebappBundle/Resources/public/css/tasks.less'
    '@AcmeWebappBundle/Resources/public/css/notes.less'
    filter='?yui_css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

このファイルには、他のファイルで使用するmixins.lessすべてのものが含まれていmixinsます。

問題は、でミックスインを参照した場合notes.less、それが認識されないことです。これは、コンパイル中のファイル内でのみミックスインをアセットが検索するためだと思います。ちなみに、私はnode.jsではなくlessphpを使用しています。

どうすれば問題を解決できますか?mixins.lessファイルで宣言されたmixinsを使用して異なるLessファイルを作成するにはどうすればよいですか?

4

1 に答える 1

7

あなたの例では、website.lessを保持し、次のように、関連するすべてのlessファイルをインポートする必要があります。

website.less:

/* import the necessary less files */
@import "mixins.less";
@import "general.less";
@import "tasks.less";
@import "notes.less";

index.html.twig:

{% stylesheets
    '@AcmeWebappBundle/Resources/public/css/website.less'
    filter='?yui_css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

このようにして、同じバンドルに存在するコントローラーまたはバンドルのファイルをいくつか少なくすることができ、マークアップに必要な関連ファイル(たとえば、、)をインポートするだけfrontend.lessです。backend.lessmobile.less

Twitter Bootstrapがインポートを処理し、すべてをうまく分離する方法を確認することをお勧めします。

于 2012-06-10T08:23:12.860 に答える