- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Re: Magento 2 : How to generate .less with grunt in custom module
@Bhanu Periwal @ thanks for reply but your method not work.