3

When rendered, the below core XML loads the require.js file in (for example) Position 10 in the HTML Source:

vendor/magento/module-theme/view/frontend/layout/default_head_blocks.xml

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <css src="mage/calendar.css"/>
    <script src="requirejs/require.js"/>
</head>

And the following custom XML loads example.css file after in Position 11 of the HTML source:

app/design/frontend/Vendor/module/Magento_Theme/layout/default_head_blocks.xml

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <css src="example/example.css"/>
</head>

Example/Sample HTML Source

 9. <link rel="stylesheet" type="text/css" media="all" href="http://example.com/pub/static/version1234/frontend/Vendor/module/en_GB/mage/calendar.css">
10. <script type="text/javascript" src="http://example.com/pub/static/version1234/frontend/Vendor/module/en_GB/requirejs/require.js"></script>
11. <link rel="stylesheet" type="text/css" media="all" href="http://example.com/pub/static/version1234/frontend/Vendor/module/en_GB/example/example.css">

Question

How do I ensure that my example.css file loads before the requirejs-config.js?

Your Answer

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

Browse other questions tagged or ask your own question.