Magento 2 : How to Import Custom Module's Less file in Custom Theme

Question

I am creating custom theme without parent. Now, I want to add custom less file inside Magento_Theme folder.

File path : app/design/frontend/VendorName/ThemeName/Magento_Theme/web/css/source/_mycustom.less

I tried to call this file inside app/design/frontend/VendorName/ThemeName/web/css/_sources.less file. But, it's not working. I added this below line in _sources.less file

@import '../Magento_Theme/web/css/source/_mycustom.less';

How can I call it without _module.less file?

Anyhelp would be appreciated.

Answer 1

You can add in app/design/frontend/VendorName/ThemeName/web/css/_sources.less

//@magento_import 'source/_mycustom.less'; // Theme modules

If you need use custom less file, you should write less code from scratch. for example:

If you create a new file listing.less in your theme then you should use only variables which use only in this file.

for example:

listing.less

@text-color: black;
.body {
 color: @text-color;
}

You can't use variables with magento lib in this file but if you want to use their then you need add this construction in your file:

@import '../../source/lib/_lib.less'; // Global lib

• Ankita Patel: It seems like not working. Actually, I want to import source/lib/_lib.less file. I did like this //@magento_import 'source/lib/_lib.less'; But, It's not working.
• Ankita Patel: When I deploy theme, It's return error @text__color is undefined in file from /var/www/html/m242/var/view_preprocessed/pub/static/frontend/Vendor/Theme/en_US/Magento_Catalog/css/listing.less file.
• m1kash: @AnkitaPatel I think issue with file listing.less. You should use _listing.less and import this file because magento will read this file and will try to compile less but if file start with underscore then magento ignore this file.
• Ankita Patel: Actually, I created custom theme without parent. So, I want to call listing.less file only in listing page. Still, I need to use _listing.less name?
• Ankita Patel: I added <css src="Magento_Catalog::css/listing.css" /> inside head tag in catalog_category_view.xml for right now.