0

I am using grunt tool for magento server-side less preprocessing.

I have created _extend.less file following directory structure for my custom less compilation

app\design\frontend\Vendorname\themename\web\css\source\ _extend.less

After all necessary configurations of grunt I managed to compile my own less files with the grunt command

grunt less:themename

Now everything works perfectly except when I am trying to add new .less file into _extend.less through @import directive grunt doesn't publish it's symlinks to

pub\static\frontend\Vendorname\themename\en_US\css

For example after I import _custom_button.less in _extend.less with

@import '_custom_button.less';

Now everytime I add new files with @import I have to run the commands.

grunt clean:themename
grunt exec:themename

So this workflow is conflicting when working with developers as it cleans everything in pub\static\frontend\Magento\themename\en_US directory.So that is the problem.I don't want to run clean command again.

Can I do anything for that?

  • No need to use clean and exec command every-time, have you tried grunt watch? – Ruhani Jun 6 '18 at 10:58
  • Grunt watch is working actually.The problem is that in default styles-l.less file we import _extend.less later through //@magento_import directive and that's why _module.less can not get our own _extend.less file variable because it gets _module.less file from each and every module. – Shashank Bhatt Jun 6 '18 at 11:13
  • See blank theme styles-l.less file in which you will find //@magento_import 'source/_extend.less'; at last. – Shashank Bhatt Jun 6 '18 at 11:14
0

Try to below code for add your own less file:

You can create new less file for your theme

/app/design/frontend/Vendor/shop1/web/css/source/_custom_button.less

Override below file in your theme

/vendor/magento/theme-frontend-blank/web/css/source/_sources.less

Import your less file in source.less

/app/design/frontend/Vendor/YourTheme/web/css/source/_sources.less

Like this @import '_custom_button.less';

  • Hello hweb87, thanks for your answer but this is not what I am looking for.Actually problem is that every time I import new less fie in web directory, I had to relaunch grunt clean and grunt exec command otherwise all idea of combining all files in pub folder (which is recommanded way) with grunt will not work. – Shashank Bhatt Jun 14 '18 at 5:26
  • @ShashankBhatt for above solution you no need to run every time grunt clean and grunt exec command. just run grunt watch. please try once above way. – hweb87 Jun 14 '18 at 5:29
  • After confirming with deveopers I came to know that even I can rerun grunt clean command and they don't mind with it as they no longer have to do anything in pub/static folder until I have not put my files in app directory. So after static content deploy I can regain all files. – Shashank Bhatt Jun 14 '18 at 5:29
  • As per your solution, it doesn't work because symlink of newly added file to app/design will not published to pub/static/frontend/magento/theme/web/cdd/source/ path automatically. Grunt will always look for file in this directory and not in app directory.To publish symlink we must run exec command. – Shashank Bhatt Jun 27 '18 at 7:25

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.