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?

Ellipsoid

Is it also an option for you to use assetic to combine the less files instead of importing them ffrom within one another? – Deepfreeze

Quite unlikely.. I need the possibility of importing other LESS files to extend behaviours of others, while I'm developing. – Ellipsoid

Look at filter definition, it seems that there is no way to pass any custom paths (for search for inclusion) github.com/symfony/AsseticBundle/blob/master/Resources/config/…. This is the method to call: github.com/kriswallsmith/assetic/blob/master/src/Assetic/Filter/… – Cortney

Also, take a look at this issue (it's very similar, but it's for SASS): github.com/kriswallsmith/assetic/issues/202 – Cortney

This is a known issue and it should be fixed soon. Take a look at: github.com/kriswallsmith/assetic/issues/79 and github.com/kriswallsmith/assetic/pull/362 – Adelaideadelaja

thanks guys anyone looking to solve the same problem may watch this issue github.com/kriswallsmith/assetic/issues/79 – Ellipsoid

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

Zigrang

Works for Stylus filter (styl files) too. – Dandelion

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

Neufer