Skip to main content
Drupal Answers

Return to Revisions

2 of 3
added 197 characters in body
Zephyr
Zephyr
  • 161
  • 1
  • 7

Can't add assets to my Bootstrap sub-theme

I'm currently struggling to include *.css and *.js files to my Bootstrap sub-theme.

I use Drupal 8 and the Bootstrap 3 base theme. I followed the instructions of the official documentation and went to create a custom SASS sub-theme for my site.

I could quickly use my newly created sub-theme in the admin panel. Great.

However it seems none of the assets registered in my *.libraries.yml are included in any page.

My SUBTHEME.info.yml file:

core:       8.x
type:       theme
base theme: bootstrap

name:         'My custom sub-theme'
description:  'This is a sub-theme of Bootstrap, using the Sass starter kit.'
package:      'Bootstrap'
version:      'alpha'

regions:
  navigation:             'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header:                 'Top Bar'
  highlighted:            'Highlighted'
  help:                   'Help'
  content:                'Content'
  sidebar_first:          'Primary'
  sidebar_second:         'Secondary'
  footer:                 'Footer'
  page_top:               'Page top'
  page_bottom:            'Page bottom'

libraries:
  - 'SUBTHEME/global-styling'
  - 'SUBTHEME/bootstrap-scripts'

My SUBTHEME.libraries.yml file (unchanged):

global-styling:
  css:
    theme:
      css/style.css: {}

bootstrap-scripts:
  js:
    bootstrap/assets/javascripts/bootstrap/affix.js: {}
    bootstrap/assets/javascripts/bootstrap/alert.js: {}
    bootstrap/assets/javascripts/bootstrap/button.js: {}
    bootstrap/assets/javascripts/bootstrap/carousel.js: {}
    bootstrap/assets/javascripts/bootstrap/collapse.js: {}
    bootstrap/assets/javascripts/bootstrap/dropdown.js: {}
    bootstrap/assets/javascripts/bootstrap/modal.js: {}
    bootstrap/assets/javascripts/bootstrap/tooltip.js: {}
    bootstrap/assets/javascripts/bootstrap/popover.js: {}
    bootstrap/assets/javascripts/bootstrap/scrollspy.js: {}
    bootstrap/assets/javascripts/bootstrap/tab.js: {}
    bootstrap/assets/javascripts/bootstrap/transition.js: {}

I strongly believe my folder hierarchy is right ; I use the base bootstrap themes/bootstrap/templates/system/html.html.twig which embarks the following header:

<head>
  <head-placeholder token="{{ placeholder_token|raw }}">
  <title>{{ head_title|safe_join(' | ') }}</title>
  <css-placeholder token="{{ placeholder_token|raw }}">
  <js-placeholder token="{{ placeholder_token|raw }}">
</head>

The CSS / JS aggregation option in the admin/config/development panel is disabled.

I compiled sass/style.scss and I do have a corresponding css/style.css file, however it never shows up on my pages. Even worse, it seems none of the libraries assets are included either.

No, I didn't forget to clear the cache. I also tried to solve my problem by reading other questions, like this one or this one ; however the questions are either not resolved or do not apply to my case.

I tried to add the following lines to my SUBTHEME.info.yml, unfortunately it doesn't work either:

stylesheets:
  - 'css/style.css'

I tried to use the Drupal/Twig tag attach_library with no success.

Interestingly, assets added from third-party modules are successfully added in a way almost identical to what I'm trying.

I'm quite sure I'm missing something simple here. Any help deeply appreciated.

Zephyr
  • 161
  • 1
  • 7