Grunt watch doesn't watch _theme.less and custom less file

Question

That's my css/source file structure: https://i.sstatic.net/5tNxJ.png

I made grunt clean, theme exec, theme less, watch. Watch is responsive to any less file changes accept of _theme.less and local.less located level us (css/local.less). Local.less was already added to theme.js:

files: [ 'css/styles-m', 'css/styles-l', 'css/local' ],

local and _theme compiling well with grunt less but not responsive for grunt watch. The problem is related ot this two file only, all others including modules extends are watching by grunt ok.

Any ideas?

---

Grunt less output:

Running "less:base" (less) task
File pub/static/frontend/MaxTheme/base/en_US/css/styles-m.css created: 307.72 kB → 529.6 kB File pub/static/frontend/MaxTheme/base/en_US/css/styles-l.css created: 51.13 kB → 89.83 kB File pub/static/frontend/MaxTheme/base/en_US/css/local.css created: 25 B → 242 B

---

UPD: Just checked /pub/static, the two less files placed not as symlinks, but as regular less files.

Answer 1

I looked into it … AND! finally the solution is too easy:

The Client Side and Grunt Compilation of *.less files REQUIRES the @import directive to contain the file extension:

use @import '_test.less' instead of @import '_test'

If ALL @imports in ALL imported files do that: you'll get a symlink to all files AND grunt watch watches! ;-)

---

According to: https://devdocs.magento.com/guides/v2.2/frontend-dev-guide/css-topics/css-preprocess.html#fedg_css-import

Answer 2

Ok, my research finished and looks like that's M2 bug.

Details:

_theme.less have the @imports in the header and that's the problem. I made theme exec and got _theme.less file copy of the same size in /pub/static, not symlink. I removed all @imports, exec, I got zero size symlink to _theme.less for now. I repeated tests 3-4 times. 100% dependency.

Ok, going forward.

My existent @imports format:

@import '_buttons_extend';

format was changed to:

@import url('_buttons_extend');

That's the miracle, I got symlink for now.

Run grunt less:theme-name, got

File "pub\static\frontend\MaxTheme\base\en_US\css\source_theme.less" changed.
Running "less:base" (less) task
FileError: '_buttons_extend.less' wasn't found in pub\static\frontend\MaxTheme\base\en_US\css\source_theme.less on line 3, column 1:
2 @import '_vars';
3 @import '_buttons_extend';
4 @import 'components/_footer';
Warning: Error compiling pub/static/frontend/MaxTheme/base/en_US/css/styles-m.less Use --force to continue.

But _buttons_extend locates in the same directory as _theme.less. I posted my dir structure screenshot above. So that's two ways: to live with the exec or less/watch error. I prefer the first one. Just to keep @imports in _theme.less and reexec theme if I added some @import there.