3

From what I read about Drupal 8 themes there does not appear to be anything to order CSS file loading. As you know, CSS cascades down to a specific order when there is a conflict with an element. Since I have a class that is named the same as Twitter Bootstrap which is loaded from the CDN from the page.html.twig, I can usually modify a bootstrap class by having the CSS file that loads last as that can trump the bootstrap class that loads earlier. I have not discovered how to set an external library like Twitter Bootstrap in the libraries.yml file so it's in my page.html.twig file. So here is my THEME.libraries.yml

global-styling:
  version: 1.x
  css:
    theme:
      css/reset.css: {}
      css/style.css: {}
      css/htme-elements.css: {}
      css/tabs.css: {}
      css/messages.css: {}
      css/block-editing.css: {}
      css/wireframes.css: {}
      bootstrap/bootstrap.css: {}
      bootstrap/bootstrap.min.css: {}
      css/layout.css: {}
      css/default.css: {}

The default.css should load last which has the class I would like to override in bootstrap, but after 

drush cache-rebuild

I find that the element is choosing the bootstrap element. OK, let me put the default.css element highest in the stacking order in case Drupal is putting in a different order. But after rebuilding my cache again, I find that bootstrap still "wins."

The closest thing in the Drupal docs was to perhaps add stylesheets-override in my THEME.info.yml

stylesheets-override:
  - system.theme.css

How should I set the order so that I can use the external Bootstrap files and load in my default.css last?

Improve this question

1 Answer 1

Reset to default
5

You can create a separate library for external bootstrap stylesheet, which will give you flexibility to load bootstrap css before loading global-styling css. Here's how to do it:

YOURTHEMENAME.info.yml

# Defines libraries group in which we can add css/js.
libraries:
  - sp/bootstrap // ADDED - note: this should go before your global-styling
  - sp/global-styling
...

YOURTHEMENAME.libraries.yml

# note: bootstrap library should go before global-styling  
# use { type: external } for external resources
bootstrap:
      css:
        theme:
         '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css': { type: external }
global-styling:
      css:
    ...
Improve this answer
2
  • I would also add that you can weight within defined libraries to ensure that the weighting is as desired. From drupal.org/developing/api/8/assets - You have 5 different css levels of styling: base key assigns a weight of CSS_BASE = -200 layout key assigns a weight of CSS_LAYOUT = -100 component key assigns a weight of CSS_COMPONENT = 0; state key assigns a weight of CSS_STATE = 100 theme key assigns a weight of CSS_THEME = 200
    – Danny Englander
    Jul 6, 2016 at 16:42
  • 1
    @DannyEnglander Good point. Though it is also good to mention that external libraries like bootstrap have css rules that will fall into every one of those levels of styling. A new library may be a better choice for someone who is really meticulous about keeping the structure of their CSS files according to SMACSS standards. Always good to have options.
    – oksana-c
    Jul 7, 2016 at 12:54

Your Answer

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

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