Bootstrap sub-theme override CSS

Question

I just set up an new Drupal 8 website. I was used to use CSS injector on Drupal 7, but since the module is not ready yet, and I thought I'd better start with subthemes, I tried to create a new Boostrap subtheme. I used the CDN method, activated it in my admin panel, but when I try to override CSS by creating CSS styles in css/style.css, nothing work. In Drupal 7 with CSS injector, my main difficulty was to find the proper class. So I tried a lot of different possibilities, copied/paste CSS from original files in Bootstrap. Nothing works.

Have anybody already tried to create a sub-theme with Bootstrap? Did overriding CSS work?

I looked at the CSS file link, it's loading lumen theme nicely. I tried to change h2 color in this file: themes/bootstrap/css/3.3.5/overrides-lumen.min.css and it works...Clearly, seems that style.css is not used...

Answer 1

I'd wager that the stylesheet has not been added to the page. The documentation is pretty solid on this: Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme.

This page isn't likely to go anywhere, but I'll summarise here. Please go and read the full documentation page though, there is MUCH more there:

The general steps for loading assets (CSS/JS) are:

1. Save the CSS or JS to a file.
2. Define a "library", which can contain both CSS and JS files.
3. "Attach" the library to a render array in a hook.

But in the case of themes, there is an alternative to step 3: themes can choose to load any number of asset libraries on all pages.

Libraries

[...] a library could just as well only contain CSS assets, or only contain JS assets. Most themes will probably want to have a global-styling asset library, for the stylesheets (CSS assets) that it wants to be loaded globally (i.e. on all pages where the theme is active — usually the whole site except the administration pages):

global-styling:
  version: 1.x
  css:
    theme:
      css/layout.css: {}
      css/style.css: {}
      css/colors.css: {}
      css/print.css: { media: print }

Attaching a library to page(s)

Attaching to all pages

To attach a library to all the pages on the site that use your theme, declare it in your theme's *.info.yml file, under the libraries key:

name: Example
type: theme
core: 8.x
libraries:
  - fluffiness/cuddly-slider