Remove or overwrite style-l.css in custom theme

magento.stackexchange https://magento.stackexchange.com/questions/331303

سؤال

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?)?

هل كانت مفيدة؟

المحلول

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.

نصائح أخرى

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.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى magento.stackexchange
scroll top