CSS Preprocessing in magento2

0
39
css processing in magento 2

Overview

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
developmentworkflow)

– 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

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css-preprocess.html

6. Compile LESS using Grunt

– Grunt configuration

– Grunt commands

– CSS source maps

https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html

You can read more here.