skip to Main Content

I’ve set up the Grunt workflow as described here:
https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html

My local-themes.js looks like this:

➜  m2 git:(master) ✗ cat dev/tools/grunt/configs/local-themes.js
'use strict';
module.exports = {
    ac_default: {
        area: 'frontend',
        name: 'Ac/Default',
        locale: 'en_US',
        files: [
            'css/source/_extend',
        ],
        dsl: 'less'
    },
    ac_retail: {
        area: 'frontend',
        name: 'Ac/Retail',
        locale: 'en_US',
        files: [
            'css/source/_extend',
        ],
        dsl: 'less'
    },
    ac_wholesale: {
        area: 'frontend',
        name: 'Ac/Wholesale',
        locale: 'en_US',
        files: [
            'css/source/_extend',
        ],
        dsl: 'less'
    }
};

I grunt watch successfully triggers when a less file in my child theme gets changed:

➜  m2 git:(master) ✗ grunt watch:ac_retail -v
Initializing
Command-line options: --verbose, --gruntfile=/data/src/m2/Gruntfile.js

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ black-list-generator, clean-black-list, default, deploy, documentation, legacy-build, mage-minify, prod, refresh, spec, static                          

Running tasks: watch:ac_retail

Loading "grunt-contrib-watch" plugin

Registering "/data/src/m2/node_modules/grunt-contrib-watch/tasks" tasks.
Loading "watch.js" tasks...OK
+ watch

Running "watch:ac_retail" (watch) task
Waiting...
Verifying property watch exists in config...OK
Verifying property watch.ac_retail.files exists in config...OK
Live reload server started on *:35729
Watching pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less for changes.
>> File "pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less" changed.
Initializing
Command-line options: --verbose, --gruntfile=/data/src/m2/Gruntfile.js

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ black-list-generator, clean-black-list, default, deploy, documentation, legacy-build, mage-minify, prod, refresh, spec, static                          

Running tasks: less:ac_retail

Loading "grunt-contrib-less" plugin

Registering "/data/src/m2/node_modules/grunt-contrib-less/tasks" tasks.
Loading "less.js" tasks...OK
+ less

Running "less:ac_retail" (less) task
Verifying property less.ac_retail exists in config...OK
Files: pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less -> pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css                          
Options: banner="", sourceMap, strictImports=false, sourceMapRootpath="/", dumpLineNumbers=false, ieCompat=false                                          
Reading pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less...OK
Writing pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css.map...OK
File pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css.map created.
Writing pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css...OK
File pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css created
>> 1 stylesheet created.
>> 1 sourcemap created.

Done.


Execution Time (2019-01-16 16:13:35 UTC-8)
loading tasks               42ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇ 39%
loading grunt-contrib-less  34ms  ▇▇▇▇▇▇▇▇▇▇ 32%
less:ac_retail              31ms  ▇▇▇▇▇▇▇▇▇ 29%
Total 107ms

Live reloading pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less...
Completed in 0.729s at Wed Jan 16 2019 16:13:35 GMT-0800 (Pacific Standard Time) - Waiting...

Unfortunately the styles-m.css or styles-l.css files are not updated. Therefore when I refresh the page the changes made in the less files are not reflected on the page.

I posted a ticket in the Magento bug tracker but they have not been particularly helpful.

https://github.com/magento/magento2/issues/20356

My question is. Does anyone here uses Grunt to compile less for a setup with multiple child themes?

In my case the intended theme inheritance looks like this:

  1. ac_retail inherits from ac_default inherits from luma
  2. ac_wholesale inherits from ac_default inherits from luma

From what I can tell the Grunt workflow is the only workflow that is actually suitable for theme development. Server and client side compilation are way too slow to use for development.

2

Answers


  1. Chosen as BEST ANSWER

    Finally figured it out. The documentation has errors. You need to specify the parent themes style files, even if your child theme has it's own root source files, if you want to re-compile styles-m.css and styles-l.css, when the child themes less files change. This local-themes.js ended up working for me:

    >>'use strict';                                                                    
    >>module.exports = {                                                               
          ac_default: {                                                                
              area: 'frontend',                                                        
              name: 'Ac/Default',                                                      
              locale: 'en_US',                                                         
              files: [                                                                 
                  'css/styles-m',                                                      
                  'css/styles-l',                                                      
              ],                                                                       
              dsl: 'less'                                                              
          },                                                                           
          ac_retail: {                                                                 
              area: 'frontend',                                                        
              name: 'Ac/Retail',                                                       
              locale: 'en_US',                                                         
              files: [                                                                 
                  'css/styles-m',                                                      
                  'css/styles-l',                                                      
              ],                                                                       
              dsl: 'less'                                                              
          },                                                                           
          ac_wholesale: {                                                              
              area: 'frontend',                                                        
              name: 'Ac/Wholesale',                                                    
              locale: 'en_US',                                                         
              files: [                                                                 
                  'css/styles-m',                                                      
                  'css/styles-l',                                                      
              ],                                                                       
              dsl: 'less'                                                              
          }                                                                            
      };
    

  2. adding

    'css/styles-m',                                                      
    'css/styles-l',     
    

    fixed it for me too. Thanks for this

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search