4

I need to override CSS/JS that will override the styling and I need it to load the last part among other CSS files link like:

<head>
<title>Home page</title>

<link  rel="stylesheet" type="text/css"  media="all" href="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/mage/calendar.css" />
<link  rel="stylesheet" type="text/css"  media="all" href="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/css/styles-m.css" />
<link  rel="stylesheet" type="text/css"  media="screen and (min-width: 768px)" href="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/css/styles-l.css" />
<link  rel="stylesheet" type="text/css"  media="print" href="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/css/print.css" />
<link  rel="icon" type="image/x-icon" href="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/Magento_Theme/favicon.ico" />
<link  rel="shortcut icon" type="image/x-icon" href="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/Magento_Theme/favicon.ico" />
<script  type="text/javascript"  src="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/requirejs/require.js"></script>
<script  type="text/javascript"  src="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/mage/requirejs/mixins.js"></script>
<script  type="text/javascript"  src="http://mage2.dev/pub/static/_requirejs/frontend/Magento/luma/en_US/requirejs-config.js"></script>

<!-- ADD MY CUSTOM CSS/JSS LOAD AT THE LAST -->
<link rel="stylesheet" type="text/css" media="all" href="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/css/OVERRIDE.CSS">
<script  type="text/javascript"  src="http://mage2.dev/pub/static/frontend/Magento/luma/en_US/js/OVERRIDE.JS"></script>            

</head>

I found this post (How to add a custom CSS file in Magento 2) but it's not working for me.

(Posted it in magento forum but got no reply: link here)

Any help would be much appreciated.

Improve this question
1

3 Answers 3

Reset to default
8

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...

Improve this answer
6
  • 2
    tried above in magento 2.2 and magento threw error, so order attribute is no longer valid :(
    – Jonathan Marzullo
    Oct 10, 2017 at 17:21
  • 1
    @JonathanMarzullo I am still using it in Magento 2.2.0 but it is working fine.
    – nhinzky
    Oct 11, 2017 at 9:01
  • Thats weird.. when i attempt to use it i get this magento 2 error Exception #0 (Magento\Framework\Config\Dom\ValidationException): Element 'css', attribute 'order': The attribute 'order' is not allowed. I am using it in the default_head_blocks.xml file
    – Jonathan Marzullo
    Oct 11, 2017 at 12:49
  • Looks like this css order functionality in Magento2 is only available with this extension: github.com/quickshiftin/mage2-ordered-assets
    – Jonathan Marzullo
    Oct 11, 2017 at 17:11
  • Yeah it should be in default_head_blocks.xml. But I can't reproduced the error you had.
    – nhinzky
    Oct 12, 2017 at 10:06
3

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>
Improve this answer
1

I struggle with same issue. I tried to find how to add override at last but unsuccessful.

You can add css file in body. Write custom block and add style on this block. Stupid way but can override code. I can't understand why magento 2 don't have order option to load css file right postion.

I found good extension on this link too but don't try https://github.com/quickshiftin/mage2-ordered-assets

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.