Drupal CSS files behaviour

Question

we have to maintain a page which was built by another agency with drupal 8. Now we are facing some weird problems with their asset-management, especially the css files:

Let's say, we have a theme-module called "my_theme". Now, when taking a look into the source-code, you can see a lot of CSS, and TWO CSS-files, linked to:

/themes/custom/my_theme/css/drupal.css?qeyhny
/themes/custom/my_theme/css/style.css?qeyhny

Taking a look into the source-code on production it seems to be quite different: We only have two css-files left, and the folder is not "/themes/custom/my_theme" anymore:

/sites/default/files/css/css_VKKggqUAg-CIbtiO65y1CJC-n5vszoMBBV-yp7EeBIM.css
/sites/default/files/css/css_0AY-LeGpCop5parFpvUGlHf9WBkxLfeAkxrh6YVVQb8.css

The module AdvAgg is not active.

The info file from the theme is as follows:

name: my theme
type: theme
engine: mytwig
description: 'My bootstrap based theme'
package: My
core: 8.x
libraries:
  - my_theme/global-styling
ckeditor_stylesheets:
  - css/style.css
regions:
  sidebar_first: 'Left sidebar'
  sidebar_second: 'Right sidebar'
  content: 'Content'
  header: 'Header'
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  logo: 'Logo'
  footer: 'Footer'
  footer_copyright: 'Footer copyright'
  highlighted: 'Highlighted'
  help: 'Help'
  breadcrumb: 'Breadcrumb'

my-theme gobal-styling:

global-styling:
  css:
    theme:
      css/drupal.css: {}
      css/style.css: {}
  js:
    js/vendor/bootstrap4/bootstrap.bundle.js: {}
    js/vendor/jquery.mousewheel.js: {}
    js/vendor/jquery-ui-1.12.1.custom/jquery-ui.js: {}
    js/vendor/jquery.ui.touch-punch.js: {}
    js/modules/common.bundle.js: {}
    js/modules/Swapbackground.bundle.js: {}
    js/modules/LazyLoad.bundle.js: {}
    js/modules/Fancyboxes.bundle.js: {}
    js/modules/Collapses.bundle.js: {}
    js/modules/HeroSlider.bundle.js: {}
    js/modules/Menu.bundle.js: {}
    js/modules/Sliders.bundle.js: {}
    js/modules/SwitchLang.bundle.js: {}
  dependencies:
  - core/jquery
  - core/jquery.ui
  - core/jquery.ui.draggable
  - core/drupal

To solve deployment-problems, I just want to know, how this could have been realized. Can anybody give me a hint? When does Drupal link directly from my theme, and when does it link from the site-directory?

score 1 · Accepted Answer · answered Aug 17 '20 at 13:24

Techinically your site will always read the CSS from the following path:

/themes/custom/my_theme/css/style.css
/themes/custom/my_theme/css/drupal.css

As configured on your my_theme.libraries.yml. The files you're seeing there are cache that Drupal generates to load your CSS faster for users. When you clear system cache this files will get deleted and recreated.

I would suggest you to include the following to your .gitignore file:

/sites/default/files
/themes/custom/my_theme/css/drupal.css?*
/themes/custom/my_theme/css/style.css?*

Also, for future references on the theme aspects of Drupal, the following link will give you a better understanding on how it's defined. What I usually achieve on my drupal projects is having Sass/Less configured on the site and I ignore the css folder because we have setup an automated deployment system that will compile from the sass/less folder every time a deployment is triggered.

Thank you very much for your explanations. Indeed it was a cache-problem, spreaded over three different deployment servers. Drupal acts like described from you. — j0nnybrav0, Sep 15 '20 at 07:09

Drupal CSS files behaviour

1 Answers1