1

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 ?

Improve this question

2 Answers 2

Reset to default
0

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

Improve this answer
1

You can define using the order attribute, below is the code snippet:

<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" />
    <css src="css/custom.css" order="0"/>
</head>
Improve this answer
5
  • order="0" is not an accepted argument (i mean as of version 2.2.x)
    – Dynomite
    Feb 21, 2018 at 18:42
  • Its working for me i tried in latest version 2.2.X.
    – Kandarp B Patel
    Feb 22, 2018 at 10:05
  • 2
    This is not working with new version of magento 2 for new version use <css src="css/custom.css" media="all and (min-width: 1px)" />
    – Kandarp B Patel
    Sep 12, 2018 at 9:41
  • You don't need the order, just change the order in the code by moving the code up or down
    – Black
    Mar 5, 2020 at 12:40
  • @KandarpBPatel This doesn't work for me, it make my custom css run between style-m.css and style-l.css, version magento 2.3.5-p1.
    – fudu
    Oct 5, 2021 at 4:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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