Overriding CSS and JavaScript

Sometimes, you may need more than one CSS or JavaScript file for a single component. Maybe you need to load some external asset. Or maybe you need to name your asset with a different name, or place it in a subfolder of the component (perhaps because you have a build script that converts SCSS to CSS, for example).

Luckily, SDC supports all those use cases.

The libraryOverrides key in the .component.yml file that we’ve used to attach dependencies can also be used to override the automatically generated library:

libraryOverrides:
  dependencies:
    - core/drupal.dialog
  css:
    component:
      another-stylesheet.css: {}
      https://drupal.org/fake-dependency/styles.css: {}
  js:
    another-javascript.js: {}
    https://drupal.org/fake-dependency/index.min.js: {}

...