cancel
Showing results for 
Search instead for 
Did you mean: 

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

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

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.

5 REPLIES 5

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

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.

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

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

 

Problem solved? Click Accept as Solution!

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

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.

11.png

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

Hello @gauravkuma56e1 

 

Kindly refer below link as well:
Grunt Compile less 

 

Thank you

Problem solved? Click Accept as Solution!

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

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