custom css file loads last in magento 2

Question

directory structure.

app / design / frontend / Kidzie / theme / Magento_Theme / layout /default_head_blocks.xml app / design / frontend / [vendor] / [theme] / web / css /custom.css

I need to load custom.css file at last of all css files. so my custom style should apply over default magento 2's css.

<css src="css/custom.css" order="100"/> Gives me error that order is not a valid property.

Answer 1

Magento2 doesn't manage the CSS order, order="" property doesn't exists,

The available CSS attributes are:

• defer
• ie_condition
• charset
• hreflang
• media
• rel
• rev
• sizes
• src
• src_type
• target
• type

I have some workaround to put the css at the end of all. the trick is to add media="all".

<css src="css/custom.css" media="all" />

Answer 2

Please first study, this Load Custom CSS After style-l.css For Home Page article. Here Rajeev K Tomy explain the load sequence of CSS at Magento2.

As you want to call your css at last, So you have done some changes at

default_head_blocks.xml

<css src="Magento_Theme::css/custom.css" media="all" />

It means to you have to change your css file location to

app / design / frontend / [vendor] / [theme] /Magento_Theme/ web / css /custom.css

Then you have to do cache flush and static content deploy.

Answer 3

If other solutions doesn't work, you can try this (this is just a workaround until we find a correct way to do this):
Create styles-l.css in your theme, then move your css code to the created file, then run deploy command so the code will go to bottom of file styles-l.css after the deploy.

app/design/frontend/Kreativsohne/Werbemittel24/web/css/styles-l.css

Hope it's help.

Answer 4

in default.xml

<referenceContainer name="head.additional">
        <block class="Magento\Framework\View\Element\Template"
               name="nd_custom_head"
               after="-"
               template="Magento_Theme::html/load_last_head.phtml" />
    </referenceContainer>

IN Magento_Theme/templates/html/load_last_head.phtml

<?php

/** @var \Magento\Framework\View\Element\Template $block */

$href = trim($block->getViewFileUrl("Magento_Theme::css/custom_style.css"));
echo '<link defer rel="stylesheet" type="text/css" href="' . $href . '">';

and create a file css/custom_style.css

It will load at last of CSS that is for sure

Happy coding