Magento Grunt 子主题编译无法更新合并的样式文件

Question

我已经按照此处所述设置了 Grunt 工作流程： https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html

我的本地-themes.js 看起来像这样：

➜  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'
    }
};

当我的子主题中的一个 less 文件被更改时，我 grunt watch 成功触发：

➜  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...

很遗憾，样式-m.css 或样式-l.css 文件未更新。因此，当我刷新页面时，较少文件中所做的更改不会反映在页面上。

我在 Magento 错误跟踪器中发布了一张票，但它们并不是特别有用。

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

我的问题是。这里有人使用 Grunt 为具有多个子主题的设置编译更少吗？

在我的例子中，预期的主题继承如下所示：

ac_retail 继承自 ac_default 继承自 luma
ac_wholesale 继承自 ac_default 继承自 luma

据我所知，Grunt 工作流是唯一真正适合主题开发的工作流。服务器端和客户端编译速度太慢，无法用于开发。

Answer 1

终于想通了。文档有错误。你需要指定父主题的样式文件，即使你的子主题有自己的根源文件，如果你想重新编译styles-m.css和styles-l.css，当子主题较少时文件改变。这个 local-themes.js 最终为我工作：

>>'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'                                                              
      }                                                                            
  };

Answer 2

添加

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

我也修好了。感谢这个

Magento Grunt 子主题编译无法更新合并的样式文件

Magento Grunt child theme compilation fails to update merged style files

magento

gruntjs

magento2