1

I am new in magneto2. I am working on LUMA theme and I have to customize it. So my approach is that I am removing all the existing i.e. style-l.css and style-m.css by writing code in the default_head_blocks.xml file because my design does not match with the current theme structure.

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

Now I want to create a custom.less file so that I can write my custom css code but don't know how to include and compile the less file now because earlier my custom.less file is coming inside the style-l.css file. But Now I have removed it. So my question is how to include and compile a custom.less file after removing the style-l.css and style-m.css.

2
  1. Add yourTheme/web/css/custom.less
  2. Add <css src="css/custom.css"/> to your default_head_blocks.xml

Look in vendor/magento/theme-frontend-blank to see more on how Magento do this.

  • I think for your first point custom.css not custom.less – hweb87 May 14 '18 at 11:48
  • The question is asking about adding custom.less. This gets compiled to CSS which is why custom.css is added in the XML. – Ben Crook May 14 '18 at 12:06
2

In order to add custom css into theme and load it at last, you can go through following directory structure.

modulename/view/frontend/web/css/custom.css

Call the corresponding css file from layout file. e.g.

<head>
 <css src="Vendor_Module::css/custom.css"/>
 <remove src="css/styles-m.css" />
 <remove src="css/styles-l.css" />
 <remove src="css/styles.css" />
</head>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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