Symfony 2 расколоть меньше файл

Question

Я строю сайт с Symfony 2 и используя меньше, как этот

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 Я использую другие файлы.

Проблема заключается в том, что если я ссылаюсь на mixin в notes.less, это не признается - я считаю, что это потому, что Assetic использует для микшинов только внутри файла, который он компилирует. Кстати, я использую lessphp, а не node.js.

Как я могу решить свою проблему? Как я могу использовать разные файлы меньшего размера, используя mixins, объявленные в файле mixins.less?

Answer 1

В вашем примере вы должны держать website.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.less, mobile.less).

Я рекомендую вам посмотреть, как Twitter Bootstrap handles imports and separates everything nicely.