0

I added bootstrap 4 to magento 2 by putting it in THEME\Magento_Theme\layout\default_head_block.xml. it works, but bootstrap 4 is overwriting magento code.

So how can I load it before the styles-m and styles-l scripts?

-1

It is not possible in magento 2, so I made a workaround.

I am overriding the file default_head_blocks.xml from my own theme. I moved the file THEME\Magento_Theme\layout\default_head_block.xml to THEME\Magento_Theme\layout\override\base\default_head_block.xml to override it everywhere.

Then I manually merged the default_head_block.xml files from:

  • vendor\magento\module-theme\view\frontend\layout\default_head_blocks.xml
  • (vendor\magento\theme-frontend-blank\Magento_Theme\layout\default_head_blocks.xml)
  • (vendor\magento\theme-frontend-luma\Magento_Theme\layout\default_head_blocks.xml)

(NOTE: My parent theme is luma, so I also needed to add theme-magento-blank and theme-magento-luma)

THEME\Magento_Theme\layout\override\base\default_head_block.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
    <!-- My Theme -->
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

        <css src="https://use.fontawesome.com/releases/v5.14.0/css/all.css" src_type="url" order="71"/>
        <css src="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&amp;display=swap" src_type="url" order="72"/>
        <css src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" src_type="url" order="45"/>
        
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" src_type="url" order="201"></script>

    <!-- vendor\magento\module-theme\view\frontend\layout\default_head_blocks.xml -->
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <css src="mage/calendar.css" order="30"/>
        <script src="requirejs/require.js"/>    <!-- Attention: If you set order here, then mixin.js and another require.js are not getting loaded anymore for unknown reasons -->
        <script src="mage/polyfill.js" order="200"/>

    <!-- vendor\magento\theme-frontend-blank\Magento_Theme\layout\default_head_blocks.xml -->
        <css src="css/styles-m.css" order="50"/>
        <css src="css/styles-l.css" media="screen and (min-width: 768px)" order="60"/>
        <css src="css/print.css" media="print" order="70"/>
        <meta name="format-detection" content="telephone=no"/>

    <!-- vendor\magento\theme-frontend-luma\Magento_Theme\layout\default_head_blocks.xml -->
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <font src="fonts/opensans/light/opensans-300.woff2"/>
        <font src="fonts/opensans/regular/opensans-400.woff2"/>
        <font src="fonts/opensans/semibold/opensans-600.woff2"/>
        <font src="fonts/opensans/bold/opensans-700.woff2"/>
        <font src="fonts/Luma-Icons.woff2"/>
    </head>
    <body>
        
    <!-- vendor\magento\module-theme\view\frontend\layout\default_head_blocks.xml -->
        <referenceBlock name="head.additional">
            <block name="critical_css_block" as="critical_css" template="Magento_Theme::html/header/criticalCss.phtml" ifconfig="dev/css/use_css_critical_path">
                <arguments>
                    <argument name="criticalCssViewModel" xsi:type="object">Magento\Theme\Block\Html\Header\CriticalCss</argument>
                </arguments>
            </block>
            <block name="css_rel_preload_script" ifconfig="dev/css/use_css_critical_path" template="Magento_Theme::js/css_rel_preload.phtml"/>
        </referenceBlock>
        <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>

The order works now, but now some methods (e.g. opening mini cart) are not working anymore, because it looks like magento code overwrites important bootstrap code and the bootstrap CSS only works properly when it gets loaded before styles-l and styles-m

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.