Magento 2 – Load custom.css After styles-l.css

cssluma-thememagento-2.1magento2theme

I am working on custom theme and the parent theme is blank.I have added the below code in default_head_block.xml 

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
    <css src="css/styles-m.css" />
    <css src="css/styles-l.css" media="screen and (min-width: 768px)"/>
    <css src="css/print.css" media="print" />
</head>

But in view source of browser custom.css loads before styles-l.css how can i fix it ?

Best Answer

I do not think you need to fix this. Look how Magento 2 render head information.. 

class \Magento\Framework\View\Page\Config\Renderer {
...
public function renderHeadContent()
{
    ...
    $result .= $this->renderAssets($this->getAvailableResultGroups());
    $result .= $this->pageConfig->getIncludes();
    return $result;
}

$result .= $this->pageConfig->getIncludes();

you can add you custom scripts in admin. Navigate to Content > Design > Configuration > Select Theme > HTML Head section > Scripts and Style Sheets field

But I think the best way would be use less processor via grunt to create your own styles. You can find more information here http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/themes/theme-create.html and http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css_debug.html

Related Topic