When making changes to my css.less file for my extension, I have to keep clearing my Static Files to see the css changes take effect in the browser.

I'm already in Developer Mode, but is there a quicker way to view my changes when I refresh my browser other than clearing the Static Files each time I make a change I want to see?


You can use Grunt to compile LESS file. Here is the steps:

  1. Install Grunt using npm:

    npm install -g grunt-cli
    cd <your_Magento_instance_directory>
    npm install
    npm update
  2. Rename Gruntfile.js.sample to Gruntfile.js

  3. Go to dev/tools/grunt/configs/themes.js and add the following section:

    <theme_name>: {
        area: 'frontend',
        name: '<Vendor>/<theme>',
        locale: '<theme_locale>', 
        files: [
        dsl: 'less'
  4. After editing your LESS file, run this commands:

    grunt clean
    grunt exec:<theme_name>
    grunt less:<theme_name>

Refresh the page and you can see the changes.

  1. Finally run this command to watch changes automatically

    grunt watch

Ref: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html


So, what I'm after does seem achievable via a backend setting. You can change the compiler from Server-side to Client-side:

STORES > Configuration > ADVANCED > Developer > Front-end development workflow > Workflow type.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.