0

I have my standard styles-m and styles-l stylesheets. I also have a custom.css stylesheet that loads later than those 2. On both staging and production everything loads in that order, but in development, styles.css loads later than the other 2.

As a result, I often don't end up with consistent results between dev and production. How can I make things load in the correct order in development?

Thanks

1
1

Once you have the extension installed you can specify an order attribute in your css XML tags.

<head>
  <css src="Namespace_Module::css/custom.css" order="100"/>
</head>

You can also use the order attribute in layout XML files such as

default_head_blocks.xml

Any css tags you don't specify an order for are treated as if they have an order of 1.

2
  • As per my experience it is perfect solution and working for me. But some time it not working due to server configuration and I faced it. Feb 11 '21 at 18:26
  • I use the porto theme. The stylesheet is being added in Smartwave_Porto/templates/html/head.phtml not in an xml. How can I change the order for that?
    – web master
    Feb 11 '21 at 21:34
-2

There was one attribute with import CSS with XML. Please check below default_headd_blocks.xml file.

app/design/frontend/{{YOUR THEME NAME HERE}}/default/Magento_Theme/layout/default_head_blocks.xml

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/custom.css" media="all"/>
    </head>
</page>

After doing the above please flush the cache once and then check the order of your CSS. Let me know still if you have any queries.

Thanks

3
  • Not working for me Feb 11 '21 at 13:25
  • @vikram did you check the order of CSS in the browser? It's working very well.
    – ZealousWeb
    Feb 12 '21 at 5:35
  • @web master which Magento Version you used?
    – ZealousWeb
    Feb 12 '21 at 6:09

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.