Remove or replace css / javascript from a Drupal 8 module

I love the library system in Drupal 8.

Themes and modules define libraries which typically include a package of stylesheets and javascript. They're easy to bundle up and easy to include only where you need them.

But what if a module provides an asset that you'd rather not load? In Drupal 8, libraries defined by a base theme or module can be overridden, removed or extended.

This comes in handy when a module provides some style or js that you want to alter or eliminate. We can do these overrides in our theme.

 

Remove a css file from a contrib module

Here's an example. I'm using Ultimenu module on a site. It's a very useful module, but I realized that I wanted to mostly rewrite the styles that it supplies. Instead of trying to write styles in my site's theme that overpower the module's or, even worse, editing/deleting the module's styles directly, I'll just not load those styles at all. (The exact same method applies to overriding javascript files as well.)

Here's how:

In your own theme

Edit your theme's themename.info.yml (themename is the name of your custom theme).

A very basic themename.info.yml file should look like this:

name: My Custom Theme
type: theme
description: Drupal 8 theme for my website.
core: 8.x
libraries:
  - mysite/global
base theme: stable

At the bottom of this, add a libraries-override key to themename.info.yml

So now you have.

name: My Custom Theme
type: theme
description: Drupal 8 theme for my website.
core: 8.x
libraries:
  - mysite/global
base theme: stable

libraries-override:
  ultimenu/ultimenu:
    css:
      theme:
        css/ultimenu.css: false

 

How the libraries-override works

This is the part that is a little tricky. You need to map all the names from the module's library definition to this rule in your info file.

Let's compare this to Ultimenu's library definition, found in the module's ultimenu.libraries.yml file, which looks like this:

ultimenu:
  version: VERSION
  js:
    js/ultimenu.min.js: {}
  css:
    theme:
      css/ultimenu.css: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - core/jquery.once

Let's break apart our new rule.

libraries-override:  this is a Drupal 8 key/rule telling your theme that the following library will be overriden.

ultimenu/ultimenu:  Think of this as a namespaced library. It breaks down to: modulename/libraryname. So the first ultimenu is the name of the module that defines the library we're overriding. The second ultimenu is the name of the library that was defined in Ultimenu module's ultimenu.libraries.yml. For whichever module you're overriding you'll need to look in its libraries file to target the correct library name.

css: We're altering the css portion of the ultimenu/ultimenu library.

theme: This is a key that indicates the weight of style loading for the site. CSS with a higher weight will load later and therefor would override other styles with a lesser weight. theme is always the last to load. And since we're working in a theme here and theme is the key the module used, it's the key we use. (Other valid keys: 'base', 'layout', component', 'state')

css/ultimenu.css: false The name of the file we're overriding. Using the keyword 'false' tells the library system to not return this file.

If you're in question, you basically copy the module's definition of the library you'll be altering.

 

RETURN A DIFFERENT STYLESHEET FOR MODULE

We can do almost the exact thing but instead of just cancelling the css file, we'll replace it with a different file.

Instead of returning false, we tell our theme which library to load instead

libraries-override:
  ultimenu/ultimenu:
    css:
      theme:
        css/ultimenu.css: css/override-styles.css

The replacement path is relative to your own theme directory.

You can use this method to override, replace or remove css files or javascript files from modules or base themes.