CSS Preprocessing in magento2

css processing in magento 2


1. How does it work ?

With Magento 1, you could just include your CSS files through XML, for example like this, in page.xml file.

css in magento1

And you could use ( or not ) whatever you want to generate that file. Madison Island theme, that first came out with Magento 1.9, is using Sass preprocessor for compiling CSS.

– In Magento 2, you still add your CSS files through XML, It looks a bit different

css in magento2

2. Request Flow

request flow magento 2

3. Less compilation modes

– Server-side Less compilation:

This is the default compilation mode, and is the only option in production application mode. In this case the compilation is performed on the server, using the Less PHP library.

– Client-side Less compilation:

When your application is not in the production mode, you can set Magento to compile .less files in a browser, using the native less.js library.

4. How to Config LESS Compilation Modes?

– From the Magento Admin go to Stores > Configuration > ADVANCED > Developer

– Next, select Default Config from the Store View drop-down list

– In the Workflow type select the compilation mode (right under Frontend

– Save the changes by clicking on the Save Config button

– Make sure that the compilation mode is the same for both website scope and StoreView.

5. How to Styles debugging in client-side and Server-side


6. Compile LESS using Grunt

– Grunt configuration

– Grunt commands

– CSS source maps


You can read more here.