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
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
  • order="0" is not an accepted argument (i mean as of version 2.2.x) – Dynomite Feb 21 '18 at 18:42
  • Its working for me i tried in latest version 2.2.X. – Kandarp B Patel Feb 22 '18 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 '18 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 at 12:40

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.