Magento 2 Load _extend.less last

Question

I am using a custom theme and then a child theme for the custom theme. I believe the easiest way to overide the themes css is to use _extend.less in the <MYCOMPANY>/<MYTHEME>/web/css/source directory. This works, however, some of the parent themes rules override the _extend.less rules.

Upon further investigation the less files get converted into "different" css files that load in the wrong order. For example:

_extend.less becomes part of pub...../<MYCOMPANY>/<MYTHEME>/en_AU/css/styles-l.css The css I'm trying to overide gets loaded in pub...../<MYCOMPANY>/<MYTHEME>/en_AU/css/config_1.css

Which gets loaded in that order so the config_1.css does not get overideen unless I add !impotant to everythin which we know is not best practice.

So how can I make it so that _extend.less loads last? Or do I need to load a new css file and make that load last? - Please advise on how to do this or reference another post.

Thanks

Answer 1

Magento has two root source file by default - styles-l.less and styles-m.less. Both the files import the _extend.less file in them. So if you write down directly to _extend.less, those rules will appear in both the files.

Styles-l.less is for desktop while styles-m.less corresponds to mobile and common styles.

So if you want to make your changes appear in only styles-m.css for example then wrap them inside below code. Here @media-common will be only true for styles-m.less.

& when (@media-common = true) {
// rules will only appear in styles-m.css
}

Same way you can do this for styles-l.less by putting code inside below.

& when (@media-target = desktop) {
// rules will only appear in styles-l.css
}

Lastly for config_1.css file, looks like it is config file which is added through some phtml template for configuration.

Find it inside app folder and look if someone has put link for it. If yes then you have to do same for your file as well for overriding purpose.

Hope it helps.