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):
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:
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.
1 Answer 1
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– Jeff Rupert2016年05月02日 20:54:00 +00:00Commented May 2, 2016 at 20:54
-
1Totally 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– quickshiftin2016年05月02日 21:00:46 +00:00Commented May 2, 2016 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– Jeff Rupert2016年05月02日 22:14:27 +00:00Commented May 2, 2016 at 22:14
-
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. NO NEED TO INSTALLED ANY KIND OF MODULE FOR ORDER CSS. It is default solutions for 2.0.x you just need to add order="Number".Vikram Kumar– Vikram Kumar2021年02月11日 18:31:22 +00:00Commented Feb 11, 2021 at 18:31
-
Rather than a downvote @VikramKumar you might consider adding another answer where you demonstrate the working behavior out of the box, as I and many other folks have not been able to get it to work, hence the creation and upvotes for this module on github.quickshiftin– quickshiftin2021年02月14日 16:32:58 +00:00Commented Feb 14, 2021 at 16:32
<sequence>through the Admin itself. Thanks though!<referenceContainer name="before.head.end">....<referenceContainer>place your resource in there?