Blogs

Working on LESS with Different Compilation Modes in Magento 2

Magento 2 includes LESS which stands for Leaner Style Sheets. LESS is a dynamic pre-processor style language used to extend the traditional style sheet in a more structured and reusable way run on the client side or server side. Magento 2 application provides a built-in LESS UI library which you can optionally extend.

What is CSS pre-processor?

CSS pre-processor is a scripting language that is an extension of CSS. It facilitates you to customize, manage and reuse the style sheets for the webpage. It provides features like variables, nesting, functions, mixins, and operations that help you build dynamic CSS.

Points to remember when working with LESS style in Magento 2

Make sure that your Magento 2 application is set to the developer mode. If your style changes do not apply after refreshing the page, cleaning the static files cache might help.

To customize front store styles, you need to create a custom theme, after that use one of the following approaches:

If you created a theme, whose parent theme is Magento out of the box Blank or Luma, you can override the default LESS files. For example, to change the values of the variables used in the default files.

Create your own custom LESS files using the built-in LESS pre-processor.

Small and simple style changes with client-side LESS compilation vs server-side

Once you create a theme, deciding which LESS compilation mode you will use before starting work on changes the styles is a best practice. There are two modes present in Magento 2, first is server-side compilation mode and second is client-side compilation mode. Creating and applying a theme is done before the compilation mode is selected, so it is described only once, but it is required. Server-side is the default mode for LESS compilation.

Doing simple style changes via server-side compilation mode

The following is an example of how the process of making simple changes looks like with the server-side LESS compilation mode:

Create and apply a theme

Add web/CSS/source/_extend.less in your theme directory

Change the buttons color by adding the following code in _extend.less: LESS code redefining the color of the primary buttons

Clean static files cache

Refresh the page, and view the changes applied

If you are using the server-side compilation mode, you need to clean the earlier generated static view files to make your changes apply. You can automate this process by using Grunt and using the built-in Grunt commands to watch changes and clean the directories.

Simple Style changes in server-side compilation mode using Grunt

Before using built-in Grunt, some prerequisite steps you need to take to be able to use it:

Install node.js to any location on your machine

Install Grunt CLI tool globally. To do this, run the following command in a command prompt:

Rename the Gruntfile.js.sample to Gruntfiile.js and package.json.sample to package.json in your Magento instance directory

After including Grunt, for your Magento instance. To do this, run the following commands in a command prompt

Note: You must have administrator-level permission on your system

After successful installation of node packages in your Magento instance directory, it’s time to add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme to the module.exports like following:

Important Grunt commands for Magento 2

Below table describes the grunt commands you can use for performing different customization tasks. Run all commands from your Magento instance directory.

Doing simple style changes via client-side compilation mode

Create a new theme and apply it via Magento admin

Add web/CSS/source/_extend.less in your theme directory

Change the LESS compilation mode to client-side from Magento admin under STORES >

Digital Ideas Matter

Bringing you ideas straight from digital professionals

We know you enjoy reading digital business and technology blogs. Well, that's why you are here. Isn't it? We share this love as well. That's why we created a place where our digital professionals from different technology and business teams could come and discuss ideas to foster business transformation through technology, digital philosophy and user centric design.

Blog Disclaimer

The views and opinions expressed in this weblog represent that of the author and not those of the employer. e-Zest holds no responsibility for the correctness of it.

From Our Blog

Subscribe to Newsletter

Connect With Us

e-Zest is a leading digital innovation partner for enterprises and technology companies that utilizes emerging technologies for creating engaging customers experiences. Being a customer-focused and technology-driven company, it always helps clients in crafting holistic business value for their software development efforts. It offers software development and consulting services for cloud computing, enterprise mobility, big data and analytics, user experience and digital commerce.