Magento 2 : How to generate .less with grunt in custom module

[gauravkuma56e1]

hello, i have use custom module with custom.less file.

path of less file : app/code/Vendor/Pagecss/view/frontend/web/custom.less

second : i have add css on :

app/code/Vendor/Pagecss/view/frontend/layout/cms_index_index.xml

<link src="Vendor_Pagecss::custom.css"/>

my custom.less file changes worked but each time with use remove folder command, but i want changes instant.

like : my child theme .less work with grunt.

my question is : how to generate .less file in custom module with grunt. is it any possibility ?  please help me.

thanks in advance.

[dipmegpro]

Hello @gauravkuma56e1 

Please create a file in below path:

app/code/Vendor/Pagecss/view/frontend/web/css/source/custom.less

Now create _extend.less file in the below path:

app/code/Vendor/Pagecss/view/frontend/web/css/source/_extend.less

and call your custom.less file in extend.less like below:

@import custom.less

It is better to use the custom less file like _custom.less as per Magento naming standards..

If my answer is helpful full then please set the accept solution flag and kudos flag so other members can take the same reference.

[Bhanu Periwal]

Hello @gauravkuma56e1 

To compile .less files, add your theme to module.exports in the Grunt configuration, either in the default dev/tools/grunt/configs/themes.js or in the custom configuration file. For example:

1. Install node.js to any location on your machine.

2. Install the Grunt CLI globally. To do this, run the following command in a command prompt:

>> npm install -g grunt-cli

3. From the <root> directory, copy and paste the contents of the following files:

(a) package.json.sample to package.json

(b) Gruntfile.js.sample to Gruntfile.js

(c) grunt-config.json.sample into grunt-config.json

4. Install (or refresh) the node.js project dependency, including Grunt, for your instance. To do this, run the following commands in a command prompt:

(a) cd <root>

(b) npm install

(c) npm update

5. Add your theme to Grunt configuration. To do this, in the dev/tools/grunt/configs/themes.js file, add your theme to module.exports like following:

<theme>: {
    area: '<area>',
    name: '<Vendor>/<theme>',
    locale: '<language>',
    files: [
        '<path_to_file1>', //path to root source file
        '<path_to_file2>'
    ],
    dsl: 'less'
}

IMPORTANT NOTE : If grunt gives the error "Error: Cannot find module ....", check the path in your grunt-config.json file and correct as necessary.

It may help you!
Thank you

[gauravkuma56e1]

ok let me check.

@dipmegpro   thanks for reply but your method not work. when i tried to @import _custom.css on _extend.less , here showing red color like error.

[Bhanu Periwal]

Hello @gauravkuma56e1 

Kindly refer below link as well:
Grunt Compile less 

Thank you

[gauravkuma56e1]

@Bhanu Periwal @ thanks for reply but your method not work.