4

I am working on a site where our front end developers want to add CSS files to specific pages through the Admin (in effect, certain Admin driven pages will have special CSS). We are not using the built-in LESS setup that Magento has.

So far, they've tried the following (in Content > Pages > Edit Page):

Edit Page Layout

This "works" in the sense that the css file is in the <head/> and gets loaded. The issue is that we also have this in our default_head_blocks.xml file: default_head_blocks.xml

When Magento combines all of the xml, the resulting css files are ordered as follows:

Snippet of CSS files

This causes the cascade to grab the CSS in an undesired order and the page doesn't display as we need. I've tried playing around with the <move/> XML action to no avail.

We've had little to no luck with finding a solution. I found this question, What is the proper way of positioning/ordering CSS files in Magento 2?, but the answer here is not an option at all.

  • I'm not sure if this page from the dev docs will be helpful as it is regarding component load order but it does also mention it can be used with CSS and LESS. – Ben Crook Apr 21 '16 at 20:25
  • I'm not sure it is helpful, unfortunately. I'm not sure how I would use <sequence> through the Admin itself. Thanks though! – Jeff Rupert Apr 21 '16 at 21:15
  • 1
    I take it that will only work if you're creating your own component. That was my only hope damn it! Hopefully someone has an answer. – Ben Crook Apr 21 '16 at 21:48
  • I haven't played around with M2 but have you tried something like <referenceContainer name="before.head.end">....<referenceContainer> place your resource in there? – dchayka Apr 28 '16 at 16:51
  • 2
    I just finished the first version of an extension that allows you to order css tags with an order attribute. Checkout my answer below and the new extension! Let me know if any problems. – quickshiftin Apr 30 '16 at 21:16
4
+50

Magento2 has no built-in mechanism for this so I decided to treat it as an opportunity to write my first Magento2 extension. The Quickshiftin\Assetorderer extension is now available on GitHub!

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

<head>
  <css src="css/page/home.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.

  • It really hurts that this is the answer (because it shouldn't require an extension to be able to reorder assets...), but once we got it configured, it worked beautifully. Thank you! – Jeff Rupert May 2 '16 at 20:54
  • 1
    Totally hear you on that and glad to have helped! Checkout that Alan Storm article I linked to under your question. It's a long read (I skimmed some of it), but interesting in that Magento2 adds some complexity on top of the layout updates that Magento1 had. The head section in particular seems to be less flexible than it was in the former version. – quickshiftin May 2 '16 at 21:00
  • Yeah, that was one of the articles that spurred the question, because we couldn't figure out how to get it to work as desired. – Jeff Rupert May 2 '16 at 22:14

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.