stylesheets-remove in .info.yml file doesn't work

Question

I'm following Drupal 8 Theming Fundamentals, Part 1 to create a Drupal 8 theme. They say that default CSS styles are added by modules in the core as shown in the following screenshot.

Those CSS files can be removed from the .info.yml theme file using code similar to the following one.

stylesheets-remove:
  - core/assets/vendor/normalize-css/normalize.css
  - core/modules/system/css/system.module.css
  - core/modules/system/css/system.theme.css
  - core/modules/views/css/views.module.css

I've done that, but nothing happens (it's says the same). Plus, when I watch to the source of the page, I see the following.

The CSS styles are aggregrated. What is happening here? How can I fix this?

Answer 1

I was also having trouble with this and I found a change record which states:

"In cases where a Drupal core asset is being removed (for example, a CSS file in jQuery UI) the full file path is needed. In cases where the file is part of a library that belongs to a module or theme, a token can be used. Note that when using the token it needs to be quoted because @ is a reserved indicator in YAML."

In my case I was trying to remove the eu_cookie_compliance.css file from the eu_cookie_compliance module. To do this I used the following in mytheme.info.yml:

stylesheets-remove:
  - '@eu_cookie_compliance/css/eu_cookie_compliance.css'

To remove module (even core ones) provided css you could try something like:

'@system/css/system.module.css'

To answer your second question about the aggregation of css files, you can switch off aggregation by visiting /admin/config/development/performance and unchecking "Aggregate and compress CSS files"