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): less file is compiled with PHP less library. In developer mode, PHP will generate the CSS files on the fly provided there is not one already. Running static content deploy will compile the stylesheet.

• Client-side compilation mode (recommended for theme development): Less file is compiled client-side on every page load, which results in slow response times and “flash of unstyled text” (FOUT) issues.

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 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 size 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 size 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 Admin.
3. Click STORES > Settings > Configuration > ADVANCED > Developer > Frontend 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 size 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.

   

When your Magento instance is in client-side Less compilation mode, simple changes are applied after saving or refreshing the page. For more sophisticated changes, you may need to manually clean the theme sub-directory in the pub/static/frontend directory and generate a new deployment. See Styles debugging.