adding custom css file priority in magento2

Question

I have added custom CSS file in custom theme with below code in

[vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml

 <head>
   <css src="css/custom.css" />      
 </head>

I want the custom.css file to load fist before the style-m.css

I tried with order="100" but that doesn't load the CSS file first.

How to make the CSS file to load first? Can anyone help me, please ?

PЯINCƏ · Accepted Answer · 2018-12-28 15:48:12Z

1

First, there is no order attribute, by doing this, you'll have an exception.

To place your custom.css before style-m.css, you'll need to declare it before style-m.css in your layout default_head_blocks.xml.

To place it after, you'll just need to add media="all" in xml declaration like this :

<css src="Magento_Theme:css/custom.css" media="all" />

answered Dec 28 '18 at 15:48

PЯINCƏ

8,9483 gold badges11 silver badges51 bronze badges

what should style-m.css contains?, I am not declared the style-m.css anywhere, it is coming from parent luma theme – jafar pinjar Dec 31 '18 at 6:02
I have declared only custom.css, style-m.css load from luma, so how to declare it before? – jafar pinjar Jan 2 at 14:14

add a comment |

1 Answer 1