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

After you create a theme, you need to decide which LESS compilation mode to use before changing styles. You can choose between two modes:

• Server-side compilation mode (default)
• Client-side compilation mode (recommended for theme development)

The examples in this topic use the simple approach for customizing theme styles. You make changes to the _extend.less file.

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 Customer login page:

Before you begin

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

Using 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. Navigate to your theme directory and add the web/css/source/_extend.less file.

2. Change the color of the buttons by adding the following code in the _extend.less file:

    .action {
        &.primary {
            background-color: palevioletred;
            border-color: palevioletred;
        }
    }
   

3. Clean static files cache.

4. Refresh the page and verify your changes.

   

5. Change the button font by adding the following code in the _extend.less file:

    .action {
        &.primary {
            background-color: palevioletred;
            border-color: palevioletred;
            font-size: 1.5em;
        }
    }
   

6. Delete all files in the following directories:

   • pub/static/frontend/<vendor>/<theme>
   • var/view_preprocessed/pub/static/frontend/<vendor>/<theme>

7. Refresh the page and verify your changes.

   

If you are using server-side compilation mode, you must clean generated static view files. Continue to the next section to learn how to use Grunt to automate this process.

Using server-side compilation mode with Grunt

1. Navigate to your theme directory and create a web/css/source/_extend.less file.
2. Install Grunt and register your theme as described in Installing and configuring Grunt.

3. From your Magento installation directory, run the following commands:

   • grunt exec:<your_theme>
   • grunt less:<your_theme>
   • grunt watch

4. Change the color of the buttons by adding the following code in the _extend.less file:

    .action {
        &.primary {
            background-color: palevioletred;
            border-color: palevioletred;
        }
    }
   

5. Refresh the page and verify your changes.

   

6. Change the button font by adding the following code in the _extend.less file:

    .action {
        &.primary {
            background-color: palevioletred;
            border-color: palevioletred;
            font-size: 1.5em;
        }
    }
   

7. Refresh the page and verify your changes.

   

Using client-side compilation mode

1. Navigate to your theme directory and create a web/css/source/_extend.less file.
2. Log in to the Magento Admin.
3. Click STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Workflow type.
4. Change the LESS compilation mode to client-side.
5. Clean static view files.

6. Change the color of the buttons by adding the following code in the _extend.less file:

    .action {
        &.primary {
            background-color: palevioletred;
            border-color: palevioletred;
        }
    }
   

7. Refresh the page and verify your changes.

   

8. Change the button font by adding the following code in the _extend.less file:

    .action {
        &.primary {
            background-color: palevioletred;
            border-color: palevioletred;
            font-size: 1.5em;
        }
    }
   

9. Refresh the page and verify your changes.

   

Simple changes are applied immediately in client-side compilation mode. For more sophisticated changes, you might need to manually clean the theme sub-directory in the pub/static/frontend directory. See Styles debugging.