0

how can i add custom.less file for any specific page in child theme? means don't need genrate inside my custom css code in style-l.css or style-m.css and i have already 2 methods used.

Method 1.

create _custom.less and add css code

app/design/frontend/Vendor/theme/web/css/source/_custom.less

_source.less (import in _cutom.less)

app/design/frontend/Vendor/theme/web/css/source/_source.less

@import'_custom.less';

Method 2.

create "_custom.less" and "_extend.less" on same location

app/design/frontend/Vendor/theme/Magento_Theme/web/css/source/_custom.less
app/design/frontend/Vendor/theme/Magento_Theme/web/css/source/_extend.less

import _custom.less in _extend.less

@import'_custom.less'

both of methods generate in style-l.css or style-m.css. but i want generate on browser css with specific css link.

Improve this question

2 Answers 2

Reset to default
0

You can make your changes in your theme Less file then they will merge automatically into styles-m.css and styles-l.css

If you are generating browser CSS like custom.css so you can create a custom.css file at app/design/frontend/Vendor/theme/web/css/

Or you can not create CSS files only use Less file for the specific page you can create _module.less file for the specific module for your requirement.

For example, create module.less at Vendor_Module/web/css/source/ path and put your style into this less file.

And if you want to view your created file on the browser then according to the custom.css module.less than use grunt and refer to the below link

Compile LESS with Grunt

Improve this answer
1
  • ok thanks for your reply. i will check & let you know.
    – Gaurav
    Oct 31, 2022 at 6:12
0

You can do something like this, for example:

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

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="Vendor_Custom::css/custom.css" />
    </head>
</page>

app/code/Vendor/Custom/view/frontend/web/css/custom.less

   #maincontent {
        padding: 0;
   }
Improve this answer
1
  • dear @Reshad, thanks for reply. i have use this method but grunt not compile on same time. when i remove pub/static folder and run static:content:deploy: command then generate css. i want when i save .less file generate css file on same time.
    – Gaurav
    Jan 6 at 6:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.