Recently I was trying to style the output from views (in this case, an example property rental search). However, it was confusing to me because although most CSS was working as expected, some was not propagating to the elements themselves. When I did a ‘view source’ of the page I saw four cryptic looking CSS files, but no sign of the CSS file I was working on. This was odd, as like I said, some of my styles were being propagated, but that style sheet file was not being loaded.
Why aren’t my CSS files being loaded by Drupal?
So what was happening with my CSS in Drupal 8? It turns out that Drupal 8 optimises the CSS files by collating all CSS files into a smaller number of CSS files. This can make debugging more difficult, as you don’t know what CSS files are being used. By default the setting Aggregate CSS files is checked, see below:
If this is checked then you will see about four CSS files in your page source, as follows:
<link rel="stylesheet" href="/your_domain/sites/default/files/css/css_5d41402abc4b2a76b9719d911017c592.css?on4agt" media="all" /> <link rel="stylesheet" href="/your_domain/sites/default/files/css/css_d850f04cdb48312a9be171e214c0b4ee.css?on4agt" media="screen" /> <link rel="stylesheet" href="/your_domain/sites/default/files/css/css_639bae9ac6b3e1a84cebb7b403297b79.css?on4agt" media="all" /> <link rel="stylesheet" href="/your_domain/sites/default/files/css/css_43e73db1939218e33f188c88ee002f21.css?on4agt" media="all" />
These files are automatically generated from all the CSS used for this particular page. This is not as useful for debugging, because you don’t know which CSS files have been loaded. However if you uncheck the Aggregate CSS files option as follows (remember to click or press the Save configuration button, and note that the URL for editing this can be found here: http://your_domain/admin/config/development/performance):
If this is unchecked then you will see a much longer list of CSS files included in your page source, a fraction of which follows:
@import url("/your_domain/core/assets/vendor/normalize-css/normalize.css?on4agt");
@import url("/your_domain/core/themes/stable/css/system/components/ajax-progress.module.css?on4agt");
@import url("/your_domain/core/themes/stable/css/system/components/align.module.css?on4agt");
@import url("/your_domain/core/themes/stable/css/system/components/autocomplete-loading.module.css?on4agt");
@import url("/your_domain/core/themes/stable/css/system/components/fieldgroup.module.css?on4agt");
@import url("/your_domain/core/themes/stable/css/system/components/container-inline.module.css?on4agt");
@import url("/your_domain/core/themes/stable/css/system/components/clearfix.module.css?on4agt");
@import url("/your_domain/core/themes/stable/css/system/components/details.module.css?on4agt");
Once you’re happy that the CSS files you are working on are definitely being loaded, then you can check the box again, to go back to the smaller list of aggregated CSS files (which is useful for faster page load times).
CSS Validation
Another quick check to see why your CSS might not be working, is to run your CSS through the W3C CSS validator. It is normal to have some warnings, however it’s good to go through them, to check whether your CSS is well-formed and is valid. It’s easy to make a mistake, like miss a brace, or make a typo that means the CSS won’t parse properly.