Note: if your sub-theme does extensive custom library implementations and/or manipulation, then you will need to extrapolate the changes needed to happen in your sub-theme. This change record only covers the base implementation of each starterkit.
The previous implementation of the Bootstrap Framework assets in the starterkits caused the files to be loaded after the base theme's assets. This caused issues where certain functionality was extended by the base theme, but immediately re-overridden by the sub-theme implementation.
The base theme's bootstrap/drupal.bootstrap
library now depends on a newly created bootstrap/framework
library. This new library is automatically extended with any CDN assets (if that starterkit is chosen).
If a sub-theme implements its own source files, then it should extend the bootstrap/framework
library with its own implementation that adds the necessary CSS and JS assets.
It should also be mentioned that, while this isn't necessarily a breaking change, newer functionality like #2831237: Bootstrap modal does not work well with jQuery UI dialog may not work properly or at all until this change is implemented.
Only the Bootstrap Framework assets should be added to this library. If you sub-theme implements additional custom assets, a new library should be created for them.
CDN Starterkit
No changes necessary.
LESS Starterkit
Combine both global-styling
and bootstrap-scripts
into the single framework
library for your sub-theme, which extends the base theme's bootstrap/framework
library.
THEMENAME.info.yml
:
- libraries:
- - 'THEMENAME/global-styling'
- - 'THEMENAME/bootstrap-scripts'
+ libraries-extend:
+ bootstrap/framework:
+ - THEMENAME/framework
THEMENAME.libraries.yml
:
- global-styling:
+ framework:
css:
theme:
css/style.css: {}
-
- bootstrap-scripts:
js:
bootstrap/js/affix.js: {}
SASS Starterkit
Combine both global-styling
and bootstrap-scripts
into the single framework
library for your sub-theme, which extends the base theme's bootstrap/framework
library.
THEMENAME.info.yml
:
- libraries:
- - 'THEMENAME/global-styling'
- - 'THEMENAME/bootstrap-scripts'
+ libraries-extend:
+ bootstrap/framework:
+ - THEMENAME/framework
THEMENAME.libraries.yml
:
- global-styling:
+ framework:
css:
theme:
css/style.css: {}
-
- bootstrap-scripts:
js:
bootstrap/assets/javascripts/bootstrap/affix.js: {}