How can I override or disable a parent theme's CSS file?

I am trying to override the menu.css file in the default Classy theme through my library file. I have read through the documentation, but anything I tried doesn't work.

What would be the correct markup to override or disable this file?

8 theming
Juston Anderson

Answers 2

Submit Answer
  • Miracle Bernhard

    Add this to your theme's .info.yml to override it with css/my-menu.css from your theme:

    libraries-override:
  classy/base:
    css:
      component:
        css/components/menu.css: css/my-menu.css

    To disable it (don't load it when loading the classy/base library):

    libraries-override:
  classy/base:
    css:
      component:
        css/components/menu.css: false

    To get the classy/base key you need for the override, find the *.libraries.yml file where the CSS is declared. The part before the slash is the * in that file (e.g. classy.libraries.yml), and the part after is the top-level key in that file under which the CSS is declared.

    In most cases I find it easiest to actually copy the library declaration from the libraries file that declares the asset to maintain the 'css', 'component', keys and indentation.

    Note that you can do the same thing for JavaScript assets as well.

    See https://www.drupal.org/node/2216195#override-extend for more information.

  •
    Thurman Barton

    just gonna drop this update here for anyone else landing on this answer: Apparently the names have changed, but this works for me on D9.2.0:

    libraries-override:
  bartik/global-styling:
    css:
      component:
        css/components/menu.css: false
        css/classy/components/menu.css: false
  bartik/classy.base:
    css:
      component:
        css/classy/components/menu.css: false

Related Questions