•  29-09-2020
  •  | 
  •  

Question

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.

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top