Magento2 Remove swatches.css – How to Remove swatches.css from Theme

cssmagento2swatchesxml

Its a pretty simple and straightforward question, at the moment my theme seems to be pulling through the following:

Vendor/default/en_GB/Magento_Swatches/css/swatches.css

this isn't in my theme, and Magento_Swatches folder doesn't exist, its obviously pulling from the core.

But i don't want this, i've written my own styles for it and dont want it there. I tried in the following way:

Vendor/default/Magento_Theme/layout/default_head_blocks.xml

<remove src="Magento_Swatches/css/swatches.css" />

<remove src="css/swatches.css" />

Neither seems to work. Does anyone know?

Best Answer

Okay, i found the solution:

<remove src="Magento_Swatches::css/swatches.css"/>

I didn't realise the :: was required. If anyone comes across this, hope it helps.

@Andy. Thank you for the solution it worked for me. This was helpful. The error was driving me crazy. Just want to add a suggestion. I am working on Magento 2.3.

Create a file in your theme folder, if it does not already exist. Do not modify Magento core files.

vi {mage_root_location}/app/design/frontend/Mgs/{your_theme_name}/Magento_Theme/layout/default_head_blocks.xml

Inside that file find the tag and add

<remove src="Magento_Swatches::css/swatches.css"/>

Should end up looking something like this

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        ...
        <remove src="Magento_Swatches::css/swatches.css"/>
        ...
    </head>
</page>

Source: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/layouts/xml-manage.html

Related Solutions

Magento 2 – How to Override Adminhtml CSS?

I eventually figured out how to do this through trial and error and inferring from various answers on here. Let's assume you're using Magento 2.0.x, your current theme is Luma, and your vendor name is "ABC"; here are the steps to override the admin theme:

1. To override the admin theme, you have to override the Theme module to specify that you're using a custom 'backend' theme. Create the files below (creating new directories as needed).

File: /app/code/ABC/Theme/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'ABC_Theme',
    __DIR__
);

File: /app/code/ABC/Theme/etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
  <type name="Magento\Theme\Model\View\Design">
    <arguments>
      <argument name="themes" xsi:type="array">
        <item name="frontend" xsi:type="string">Magento/luma</item><!-- or whatever theme you're currently using -->
        <item name="adminhtml" xsi:type="string">ABC/backend</item>
      </argument>
    </arguments>
  </type>
</config>

File: /app/code/ABC/Theme/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="ABC_Theme" setup_version="2.0.0">
    <sequence>
      <module name="Magento_Store"/>
    </sequence>
  </module>
</config>

If you installed sample data, then change the code to this:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
  <module name="JP_Theme" setup_version="2.0.0">
    <sequence>
      <module name="Magento_Theme"/>
      <module name="Magento_Store"/>
      <module name="Magento_SampleData"/>
    </sequence>
  </module>
</config>

2. Add our custom admin (backend) theme. Create the files below to use a monospace font for textarea fields in Magento Admin.

File: /app/design/adminhtml/ABC/backend/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
  \Magento\Framework\Component\ComponentRegistrar::THEME,
  'adminhtml/ABC/backend',
  __DIR__
);

File: /app/design/adminhtml/ABC/backend/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
  <title>Admin</title><!-- your theme's name -->
  <parent>Magento/backend</parent><!-- the parent theme, in case your theme inherits from an existing theme -->
</theme>

File: /app/design/adminhtml/ABC/backend/Magento_Theme/layout/default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!-- Add adminhtml theme overrides -->
        <css src="css/custom.css"/>
    </head>
</page>

File: /app/design/adminhtml/ABC/backend/web/css/custom.css

textarea {
  font-family: Consolas, monospace;
}

3. Do a magento setup:static-content:deploy and your changes should be reflected once you reload an admin page.

Magento 2 – Overwrite Module Less/CSS with Theme

Put an empty file in here {theme}/Vendor_Module/web/css/source/_module.less. The blank file will override the module's _module.less file. You shouldn't need to bother with the other .less files.

Then you have to clear the static content so that Less gets recompiled : rm -rf pub/static/* var/view_preprocessed/*.

Best Answer

Related Solutions

Magento 2 – How to Override Adminhtml CSS?

Magento 2 – Overwrite Module Less/CSS with Theme

Related Topic