Magento 2 Grunt - Error arguments missing ')'

[ghost]

I have tried to implement bootstrap-less-port into Magento 2. I have use Grunt for the compile less to CSS.

Installed Grunt Details.

grunt-CLI v1.3.2 grunt v1.0.4

Magento 2 use below devDependencies

 "devDependencies": {
    "glob": "~7.1.1",
    "grunt": "~1.0.1",
    "grunt-autoprefixer": "~3.0.4",
    "grunt-banner": "~0.6.0",
    "grunt-continue": "~0.1.0",
    "grunt-contrib-clean": "~1.1.0",
    "grunt-contrib-connect": "~1.0.2",
    "grunt-contrib-cssmin": "~2.2.1",
    "grunt-contrib-imagemin": "^3.1.0",
    "grunt-contrib-jasmine": "^2.1.0",
    "grunt-contrib-less": "~1.4.1",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-eslint": "~20.1.0",
    "grunt-exec": "~3.0.0",
    "grunt-jscs": "~3.0.1",
    "grunt-replace": "~1.0.1",
    "grunt-styledocco": "~0.3.0",
    "grunt-template-jasmine-requirejs": "~0.2.3",
    "grunt-text-replace": "~0.4.0",
    "imagemin-svgo": "^7.1.0",
    "load-grunt-config": "^3.0.1",
    "morgan": "~1.9.0",
    "node-minify": "^3.6.0",
    "path": "~0.12.7",
    "serve-static": "~1.13.1",
    "squirejs": "~0.2.1",
    "strip-json-comments": "~2.0.1",
    "time-grunt": "~1.4.0",
    "underscore": "~1.8.0"
}

Error

ParseError: Could not parse call arguments or missing ')' in pub/static/frontend/XXXXXX/XXXXX/en_US/css/source/less/_root.less on line 6, column 16: 5 //} 6 each(@colors, #(@value, @color) { 7 --@{color}: @value;

Image: https://prnt.sc/rfalir

Debugged

you have used each(@list, #(@value) {}) means

each(@colors, #(@value, @color) {
    --@{color}: @value;
});

If we use without a defined variable.maybe it works. Ex.

each(@colors,  {
    --@{key}: @value;
});

Can you please help for fix this issuse.

[seanCodes]

Hi @hiteshseepossible, can you tell me what version of Less you’re using?

[seanCodes]

Yeah it looks like the version of grunt-contrib-less that you’re using uses an older version of Less. Are you able to update the Magento dev dependencies? If so you could bump grunt-contrib-less to 2.0.0.

Alternatively, you could npm install [email protected], since 1.0.0 is compatible with older versions of Less.

Let me know if either of those works for you or if you run into any more trouble.

[ghost]

Thank you for the suggestion I have use grunt-contrib-less:2.0.0. But now facing another issue. Error

pub/static/frontend/XXXX/en_US/css/source/less/_functions.less: [L10:C0] 'plugins/map-keys.js' wasn't found. Tried - pub/static/frontend/XXXX/en_US/css/source/less/plugins/map-keys.js,pub/static/frontend/XXXX/en_US/css/plugins/map-keys.js,npm://plugins/map-keys.js,plugins/map-keys.js Warning: Error compiling pub/static/frontend/XXXX/en_US/css/styles-m.less Use --force to continue. Aborted due to warnings.

[seanCodes]

How are you importing bootstrap-less-port into your project? Also, could you do npm ls --depth 0 | grep less and tell me what Less version is being used now?

[ghost]

I have up your less folder into my directory. npm ls --depth 0 | grep less got below output.

├── [email protected] npm ERR! peer dep missing: ajv@^5.0.0, required by [email protected]

[seanCodes]

Ok so you’re not importing from node_modules like this?

@import “bootstrap-less-port”;

Also I messed up that command, can you tell me the output of npm ls | grep less

[ghost]

NO, I have use direct your less folder. Can you please guide me on how to set up it, I am PHP dev :-)

npm ls | grep less

├--┬ [email protected] │ ├--┬ [email protected] │ │ ├---- [email protected]

npm ERR! peer dep missing: ajv@^5.0.0, required by [email protected]

[ghost]

I will explain, What Magento 2 did when I run Grunt.

We have to run below CLI for less.

grunt exec It will copy all the less files into the pub/static folder. NOTE: but in this copied folder there is missing your plugin folder.

grunt less Conver those files into CSS.

[seanCodes]

Ah interesting, thank you for explaining.

I’m not sure why the plugin folder would not be copied, but maybe it’s because the plugin folder contains JS files? I’m not sure.

It sounds like this issue is out of my control, though. 🙁 Maybe you can look into the gruntfile and see what the exec task does and modify it to copy over all files (not just Less ones).

If you can link me to the gruntfile that contains the exec task I might be able to take a look at that code and help further. Otherwise you might need to create an issue in the Magento repo.

[ghost]

You can check more in below link

GruntFile https://github.com/magento/magento2/blob/2.4-develop/Gruntfile.js.sample

Setup Theme https://github.com/magento/magento2/blob/2.4-develop/dev/tools/grunt/configs/themes.js

we use below CLI for run

• Remove Cache
• Clean theme by the command: grunt clean
• Run CMD command prompt with administrator privilege.
• Run the command: grunt exec:yourthemename
• Run the command: grunt less:yourthemename
• Run the command: grunt watch

[Amadeco]

@hiteshseepossible as far as I know, Magento doesn't import (and support) less js plugin when you compile theme code, so it will always return errors. You can do a workaround by using a recent less compiler by grunt command in developer mode But when you will have to pass to production mode, it will not work. A solution will be to download a downgraded version of this repository.

I am using a separate bootstrap.css file compiled from sass versions. But I lost all modularity.

I do not know if you know about "https://asset-packagist.org", you can using it in your magento project to download in a particular directory (I am using this one by example "lib/web") I was using it in developer mode to install bootstrap-less-port with Magento 2.