Magento – Grunt watch doesn’t watch _theme.less and custom less file

customerrorgruntlessmagento2

That's my css/source file structure:
https://i.stack.imgur.com/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.

Best Answer

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

Related Topic