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?

1 Answer 1

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

This site is temporarily in read-only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .