Simple style changes with client-side LESS compilation vs. server-side

What's in this topic

After you create a theme, before starting to change the styles, is deciding, which LESS compilation mode you will use. There are two modes available in Magento: server-side compilation mode (the default one, recommended for production) and client-side (recommended for theme development). This topic demonstrates on a practical example how the choice of the mode influences the styles development.

The first step, creating and applying a theme is done before the compilation mode is chosen, so it is described only once, but is required whatever compilation mode you will further use.

In the examples in this topic the simplest approach for customizing theme styles is used: changes are done in the _extend.less of the new theme.

In our examples we will change the color and font of the primary buttons. The default view of the primary buttons can be illustrated by the Create an Account button view on the Admin login page:

Contents

• First step: Create and apply a theme
• Making simple style changes in server-side compilation mode
• Making simple style changes in server-side compilation mode using Grunt
• Making simple style changes in client-side compilation mode

First step: Create and apply a theme

1. Create a new theme as described in the Create a theme topic. In your theme.xml specify Magento Luma or Magento Blank as a parent theme.
2. Apply your theme in the Magento Admin.

Server-side is the default mode for LESS compilation, so if you do not change this, your Magento instance is using server-side compilation mode.

Making simple style changes in server-side compilation mode

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

1. Create and apply a theme.
2. In your theme directory, add web/css/source/_extend.less.
3. Change the color of the buttons by adding the following code in _extend.less:
4. Delete all files in the following directories: - pub/static/frontend/<Your_Vendor>/<your_theme> - var/view_preprocessed/less
5. Refresh the page, and view the changes applied. For example:
6. Change the font of the buttons by adding the following code in _extend.less:
7. Delete all files in the following directories:
   • pub/static/frontend/<Your_Vendor>/<your_theme>
   • var/view_preprocessed/less
8. Refresh the page, and view the changes applied.
If your Magento instance uses the server-side compilation mode, you need to manually clean sub-directories in pub/static and var/view_preprocessed/less to make your changes apply. You can automate this process by additionally installing Grunt, and using the built-in Grunt commands to watch the changes and clean the directories. The flow of making changes using Grunt is described in the following section.

Making simple style changes in server-side compilation mode using Grunt

1. Create and apply a theme.
2. In your theme directory, add web/css/source/_extend.less.
3. Install Grunt and register your theme as described in Installing and configuring Grunt.
4. From your Magento installation directory, run the following commands:
   • grunt exec: <your_theme>
   • grunt less: <your_theme>
   • grunt watch
   Where <your_theme> is the code of your theme. Conventionally it should coincide with the theme directory name.
5. Change the color of the buttons by adding the following code in _extend.less:
6. Refresh the page and view your changes applied:
7. Change the font of the buttons by adding the following code in _extend.less:
8. Refresh the page and view your changes applied:

Making simple style changes in client-side compilation mode

1. Create and apply a theme.
2. In your theme directory, add web/css/source/_extend.less.
3. In the Magento Admin, change the LESS compilation mode to client-side under STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Workflow type. For detailed description see the CSS preprocessing topic.
4. Delete all files in the following directories:
   • pub/static/frontend/<Your_Vendor>/<your_theme>
   • var/view_preprocessed/less
5. Change the color of the buttons by adding the following code in _extend.less:
6. Refresh the page and view your changes applied:
7. Change the font of the buttons by adding the following code in _extend.less:
8. Refresh the page and view your changes applied:
If your Magento instance uses the client-side compilation mode, simple changes are applied at once. In case of more sophisticated changes, you might need to manually clean the theme sub-directory in the pub/static/frontend directory. There are more details about these types of changes and about the client-side mode implementation in the Styles debugging topic.

Recommended reading

• Styles debugging
• CSS preprocessing