Setting up CSS Less Preprocessor

Are there instructions anywhere for setting up the LESS CSS Preprocessor with OroCRM/OroBAP?

If I look in `oro_css.html.twig`, I see a lot of code that appears to be related to the LESS CSS processor.
#File: vendor/oro/platform/src/Oro/Bundle/AsseticBundle/Resources/views/Assets/oro_css.html.twig
{% oro_css filter='cssrewrite, lessphp, cssmin' output='css/oro.css' %}
{% set isLess = ('less' in asset_url|split('.')) %}
{% if isLess %}
<script type="text/javascript">localStorage.clear();</script>
{% endif %}
<link {% if isLess %}rel="stylesheet/less"{% else %}rel="stylesheet"{% endif %} media="all" href="{{ asset_url }}" />
{% if isLess %}
<script type="text/javascript" src="{{ asset('bundles/oroui/lib/less-1.3.3.min.js') }}"></script>
{% endif %}
{% endoro_css %}

However, even after reading the `OroAsseticBundle`’s README file at

vendor/oro/platform/src/Oro/Bundle/AsseticBundle/README.md

1	vendor/oro/platform/src/Oro/Bundle/AsseticBundle/README.md

It’s not clear how a developer wanting to work with OroCRM’s LESS implementation should proceed.

Topic

[Yurii MuratovParticipant]

Hi.
To use CSS, You need to create assets.yml in your bundle.
In this file there is list of css groups and css files for this groups.
For example,

css: acme_bundle_css_group: - 'Path/To/Css/one.css' - 'Path/To/Css/two.css' - 'Path/To/Css/three.css'

1 2 3 4 5 6 7

css:     acme_bundle_css_group:         - 'Path/To/Css/one.css'         - 'Path/To/Css/two.css'         - 'Path/To/Css/three.css'

After, You need to run php app/console assets:install connamd. Css styles from this files will be in main web/css/oro.css file which already added to the main template.

[alanstormParticipant]

Yurio — thanks for the answer — but that wasn’t quite what I was looking for. I know how to generate and add files to the merged CSS files with the `assets` command. I want to know how to use the less CSS processor (which it appears Oro developers have enabled via the code mentioned above)

[Dima SorokaKeymaster]

Hi @alanstorm

There to ways to use LESS processor:

Process LESS files on server side with running assetic:dump command, this will regenerate CSS files in web folder.
Process on client side with JS engine, to do so you just enable oro_assetic.css_debug_all for all less/css files or specify specific group in css_debug (groups are defined in assets.yml).

Please let me know if it helps or if you have any other questions.

[Author]

Replies