2

I am developing a Drupal theme and noticed the following CSS files are added automatically by Drupal. I would like to them to be removed.

<link rel="stylesheet" href="/core/themes/stable/css/system/components/ajax-progress.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/align.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/autocomplete-loading.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/fieldgroup.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/container-inline.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/clearfix.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/details.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/hidden.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/item-list.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/js.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/nowrap.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/position-container.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/progress.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/reset-appearance.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/resize.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/sticky-header.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/system-status-counter.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/system-status-report-counters.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/system-status-report-general-info.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/tabledrag.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/tablesort.module.css?owah24" media="all" />
<link rel="stylesheet" href="/core/themes/stable/css/system/components/tree-child.module.css?owah24" media="all" />

I have tried two ways to remove it. First one is using libraries-override

libraries-override:
  system/base:
    css:
      component:
        /core/modules/system/css/components/align.module.css: false

The next one is using hook_alter_css

function hook_css_alter(&$css, \Drupal\Core\Asset\AttachedAssetsInterface $assets) {
  unset($css[drupal_get_path('module', 'system') . 'css/components/align.module.css']);
}
  • On the libraries-override, does it work if you take the leading slash out of the path (/core) and rebuild the cache? – Patrick Kenny Sep 27 '17 at 16:46
  • @PatrickKenny No luck. – forethought Sep 27 '17 at 16:58
6

Also, you can exclude a whole library at all by adding:

libraries-override:
  system/base: false
3

I went to the stable theme, checked the .info.yml file and libraries-override section.

I have removed the stylesheets using the following snippets.

libraries-override:
  system/base:
    css:
      component:
        css/components/ajax-progress.module.css: false
        css/components/align.module.css: false
        css/components/autocomplete-loading.module.css: false
        css/components/fieldgroup.module.css: false
        css/components/container-inline.module.css: false
        css/components/clearfix.module.css: false
        css/components/details.module.css: false
        css/components/hidden.module.css: false
        css/components/item-list.module.css: false
        css/components/js.module.css: false
        css/components/nowrap.module.css: false
        css/components/position-container.module.css: false
        css/components/progress.module.css: false
        css/components/reset-appearance.module.css: false
        css/components/resize.module.css: false
        css/components/sticky-header.module.css: false
        css/components/system-status-counter.css: false
        css/components/system-status-report-counters.css: false
        css/components/system-status-report-general-info.css: false
        css/components/tabledrag.module.css: false
        css/components/tablesort.module.css: false
        css/components/tree-child.module.css: false
1

If you override "stable" theme :

libraries-override:
  system/base: false

is enough...

If you override an other theme as "classy" you have to remove useless css files like that :

libraries-override:
system/base:
  css:
    component:
      css/components/ajax-progress.module.css: false
      css/components/align.module.css: false
      css/components/autocomplete-loading.module.css: false
      ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.