1

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.

Improve this question

3 Answers 3

Reset to default
0

I see that you don't include global-scripts in .info.yml file. You should have something like this at the beginning of your .info.yml file:

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

global-scripts:
  js:
   js/URI.min.js: {}
    js/jquery.waypoints.min.js: {}
     js/global.js: {}

If this doesn't work, I would highly recommend you to get a fresh copy of SASS directory of starterkits(it is in themes/contrib/starterkits/sass) then check out all the THEMENAME and replace it with your custom theme name. Kind regards

Improve this answer
2
  • I used the bootstrap default file and didn't change a line to it, it's supposed to be working as-is. I don't believe the name of the library to include has an incidence here.
    – Zephyr
    Commented Feb 23, 2017 at 17:55
  • Actually I found the root of the problem. I answered my own question. I'll accept it when I can.
    – Zephyr
    Commented Feb 23, 2017 at 17:56
0

Well, that might be right even though I have never encountered a bug like this. But I would follow the directory standards of Drupal 8 along with composer and drupal console when you need to install theme or module so you can avoid the dirty work.

Improve this answer
1
  • I'm sure this is it, I tested renaming the theme and it worked. Nowhere in the doc it says you can't name a theme after a module so I guess this is indeed a bug.
    – Zephyr
    Commented Feb 23, 2017 at 18:21
0

Found the answer here.

Long story short, in Drupal 8, after being compiled, module and theme libraries are thrown together at the same place without namespaces, causing overriding errors with the assets.

To anyone facing a similar problem: don't ever, ever, give the same name to a module and a theme.

This is clearly a Drupal 8 bug ; hopefully it will be corrected in the future. I didn't explored its extent but to be on the safe side you should avoid giving a theme the name of any module, custom or third-party.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.