I am using below code to include my custom CSS file in home page only:
File: app/design/frontend/[Package]/[Theme]/Magento_Theme/layout/cms_index_index.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="Magento_Theme::css/home/slider.css" />
</head>
</page>
This includes the css/home/slider.css
file in the HTML but which loads before style-l.css
and after style-m
files included by Magento. I need my CSS file to be included after the style-m.css
and style-l.css
loaded by Magento.
Magento loads its style CSS files via default_head_blocks.xml
which I believe if I use in my case, it will load my custom CSS style in every page which I don't want at all.
So how can achieve the desired behavior via layout updates?
EDIT
As Kishan's answer points out, adding media="all"
did the trick. But I would like to know how that magic happens.