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?

Improve this question
3
  • No need to use clean and exec command every-time, have you tried grunt watch? Commented Jun 6, 2018 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. Commented Jun 6, 2018 at 11:13
  • See blank theme styles-l.less file in which you will find //@magento_import 'source/_extend.less'; at last. Commented Jun 6, 2018 at 11:14

1 Answer 1

Reset to default
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';

Improve this answer
4
  • 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. Commented Jun 14, 2018 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. Commented Jun 14, 2018 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. Commented Jun 14, 2018 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. Commented Jun 27, 2018 at 7:25

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.