Magento 2: How to add Custom CSS/JS that will load last among other CSS/JS files

Thanks @long thanh: The extension you shared really works but as I tested it without the extension it is still working.

Tried it on Magento 2.0.7 and 2.1.1 fresh installation and just add this to add custom CSS:

<css src="css/override.css" order="100" />

and custom JS:

<script src="js/override.js" order="100" />

So the answer is you just add the order="" attribute to be read at the last style or javascript. Also the value in "order" attribute doesn't really matter to the ordering it will still be read at the last part.

But if you have 2 or more custom css/js like this:

<css src="css/override.css" order="100" />
<css src="css/override2.css" order="100" />
<script src="js/override.js" order="100" />
<script src="js/override2.js" order="100" />

The result will be the same order the way you write it so..

-styles loaded here .......
<css src="css/override.css" order="100" />
<css src="css/override2.css" order="100" />

-javascripts loaded here.......
<script src="js/override2.js" order="100" />
<script src="js/override.js" order="100" />

Thanks guys...


You can add the media attribute which magento 2 will put to the end of the css in the head section. Setting a width of only 1px will enable it on all devices:

<head>
    <css src="css/homepage.css" media="all and (min-width: 1px)"/>
</head>

Tags:

Magento2

Overrides

Recent Posts