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:
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:
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?
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.