3

I have some issues because of the order that CSS is being loaded in. We have

<link  rel="stylesheet" type="text/css"  media="all" href="https://<site>/pub/static/_cache/merged/c53078aed3784c1f81c0316580b47a29.css" />
<link  rel="stylesheet" type="text/css"  media="screen and (min-width: 768px)" href="https://<site>/pub/static/frontend/Thespicery/standard/en_GB/css/styles-l.css" />

I really need the cached file to be loaded after the style-l.css.

I am relatively happy to remove the style-l.css altogether but as yet have failed.

I have tried:

  • Removing the parent them (current Magento Blank) from the XML but this doesn't actually remove the reference to the file - it only deletes the actual file and then gives a 404 error (which technically works but I don't want the <link> in the source code

  • In default_head_blocks.xml for Magento Theme overrides adding:

<action method="removeItem"><type>skin_css</type><name>css/style-l.css</name></action>

and

<action method="removeItem"><css src="css/styles-l.css" media="screen and (min-width: 768px)"/></action>

but to no avail.

What is the correct way of doing this? Should I just try to change the load order (is that even possible), or should I remove style-l.css (and if so, how?)?

Improve this question

2 Answers 2

Reset to default
5

To remove CSS via XML:

In your theme add the following XML to default.xml

<head>
    <remove src="css/styles-l.css" />
</head>

Source

Your method didn't work because you're using the Magento 1 method of removing CSS. In Magento 2 <action> tags have been deprecated and skin_css is no longer used, in fact I don't think the theme is referenced to as skin at all anymore.

Improve this answer
2
  • I have removed styles-l.css from default.xml but it's still showing in page speed mobile mode what to do?
    – jykmhar123
    Commented Oct 20, 2020 at 5:52
  • try adding this code to the default_head_blocks.xml file
    – VishalParkash
    Commented Dec 21, 2020 at 10:57
0

In app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default_head_blocks.xml:

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Remove local styles resources -->
        <remove src="css/styles-m.css"/>
        <remove src="<Namespace>_<ModuleName>::css/styles.css"/>

        <!-- Remove external resources -->
        <remove src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
    </head>
</page>

Source.

In some cases, you need to duplicate the code in app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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