Symfony 2 how to import LESS files from another bundle

Question

LESS has the power to @import other LESS files. This question is intended to find a solution to import LESS files within LESS files from another Bundle in a Symfony project

I'm working on a Symfony2 project, using LESS and Assetic to watch changes. My LESS files are able to import other LESS files but only if they are in the same bundle.

If I try to import from another bundle Assetic watch stops with error "variable undefined" because the import fails.

I've tried all sorts of paths in the import:

In a LESS file in another bundle:

@import "../../../../MainBundle/Resources/public/less/colors.less";

@import "../../../../../../src/website/MainBundle/Resources/public/less/colors.less";

@import '/bundles/main/less/colors.less'

@import url('/bundles/main/less/colors.less');

I'm sure I've tried several correct paths, but they never work because the file is in another bundle and the Assetic watch / LESS compilation processes don't do this well between the bundles.

Any ideas anyone?

Answer 1

I think that you must use the paths from web/bundles dir.

i'm importing files this way:

i have 2 less files:

• src/Acme/FirstBundle/Resources/public/less/style1.less
• src/Acme/SecondBundle/Resources/public/less/style2.less

I want to import style1.less into style2.less

style2.less:

@import "../../acmefirst/less/style1";

using: cssrewrite filer, lessphp

also remember to refer the LESS files using their actual, publicly-accessible path: http://symfony.com/doc/current/cookbook/assetic/asset_management.html#including-css-stylesheets

Answer 2

Here is a complete working example at least on Symfony 2.8. This example using Assetic and is supposed to work with embed file in your css.

Here the arborescence

/app
/src
---/Acme
------/MyBundle
---------/Ressources
------------/public
---------------/css
------/MyOtherBundle
---------/Ressources
------------/public
---------------/css
/web
---/bundles
------/acmemybundle
------/acmemyotherbundle
---/css
------/built

So in let's say /src/Acme/MyBundle/Ressources/public/css/main.scss is the file with all the declaration that I want to import in my other bundle (in my case I use sass but it's the same with less).

In /src/Acme/MyOtherBundle/Ressources/public/css/mycss.scss I'll do :

@import "../../../../MyBundle/Resources/public/css/main";

This refer to the classic physical location of the file, so your IDE will find it.

Now the interesting part. We want to compile, minify, and rename all the scss file into only one css file. We can do this with Assetics.

In a twig file where you load your css (in my case /app/Ressources/views/css.html.twig).

    {% stylesheets
    filter='compass'
    filter='?uglifycss'
    filter='cssrewrite'
    output='css/built/myMinifiedAndCompiledSass.css'
    'bundles/mybundle/css/*.scss'
    'bundles/myotherbundle/css/*.scss'
   %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}">
    {% endstylesheets %}

==> Here you have to refer the file from the /web directory (so using 'bundles/acmemybundle..' syntax. You need to install the asset in symlink mode. (php app/console asset:install --symlink)

==> You can put whatever you want in output filemane and location since you stay in the web directory.

And finaly in your conf.yml

# Assetic Configuration
assetic:
    filters:
        cssrewrite: ~
        sass:    ~
        compass:
             load_paths:
                  - "/usr/bin/compass"
                  - "%kernel.root_dir%/../src/Acme/MyBundle/Resources/public/css/"
        uglifycss:
            bin: %kernel.root_dir%/../node_modules/.bin/uglifycss
        uglifyjs2:
            bin: %kernel.root_dir%/../node_modules/.bin/uglifyjs

The important part here is the load_paths in compass. In the basic set up you have compass : ~ You need to change it for :

  compass:
                 load_paths:
                      - "/usr/bin/compass"
                      - "%kernel.root_dir%/../src/Acme/MyBundle/Resources/public/css/"