Magento – custom css file loads last in magento 2

magento2

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.

Best Answer

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" />

Related Solutions

Magento – how to load or add js before require js in magento 2

To load custom js before require.js than add custom js in below XML path

app\design\frontend\Enterprise\Orange\Magento_Theme\layout\override\base\default_head_blocks.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
                            <link src="js/customercookie.js"/>
                            <link src="js/customercookie.js"/>
                            <link src="Orange_Webform::js/mnpform.js"/>
    <css src="mage/calendar.css"/>
    <css src="common-header/css/custom.css"/>
                            <script src="shm/shm.js"/>
                            <script src="common-header/js/custom.js"/>
    <script src="requirejs/require.js"/>
  </head>
  <body>
    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Js\Components" name="head.components" as="components" template="Magento_Theme::js/components.phtml" before="-"/>
    </referenceContainer>
  </body>
</page>

Magento 2: CSS Blocked Due to MIME Type Mismatch

Override the below file in your theme

magento\vendor\magento\module-catalog\view\frontend\layout\catalog_product_view.xml

Add your css under gallery.css

<head>
    <css src="mage/gallery/gallery.css"/>
    <css src="<path>/custom.css"/>
</head>

Best Answer

Related Solutions

Magento – how to load or add js before require js in magento 2

Magento 2: CSS Blocked Due to MIME Type Mismatch

Related Topic