CODEWITHSUNDEEP
symfonylessassetic
Dan
Dan

Reputation: 16276

Symfony 2 split less file

I am building a website with Symfony 2 and using Less, like this

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$"

Now the file website.less was growing a lot so I decided to split it into different files, like this:

{% 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 %}

The file mixins.less contains all the mixins I use across the other files.

The problem is that if I reference a mixin in notes.less, that is not recognised - I believe that is because Assetic seaches for mixins only inside the file it is compiling. By the way, I am using lessphp, not node.js.

How can I solve my problem? How can I have different Less files using mixins declared in the mixins.less file?

Upvotes: 1

Views: 1603

Answers (1)

cvaldemar
cvaldemar

Reputation: 6993

In your example you need to keep the website.less and just have it import all the relevant less files, like this:

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 %}

This way you can have several less files for your controllers or bundles which live in the same bundle, just importing the relevant files needed for the markup (for instance frontend.less, backend.less, mobile.less).

I encourage you to look at how Twitter Bootstrap handles imports and separates everything nicely.

Upvotes: 7

Related Questions