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.

nhinzky
  • 709
  • 1
  • 11
  • 23

3 Answers3

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

nhinzky
  • 709
  • 1
  • 11
  • 23
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>
Cypher909
  • 308
  • 3
  • 9
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

long thanh
  • 21
  • 3