8 – Bootswatch Cyborg, custom styles not applied

This is not working for me. I’ve re-structured my question.

I wish to create a new Sub-Theme based on the Bootswatch Cyborg theme. I wish to edit the CSS to change the styles. Without having to compile SASS or LESS.

The things I have done/tested to make it work:

  1. composer require drupal/bootstrap, enabled in Drupal. (Installed on a localhost as well as a Live host) -it doesnt make any difference.

  2. Setup a sub-theme. As per Documentation instructions, by using the starterkits/THEMENAME project and enabled in Drupal.

    I followed steps 1-6 as described here: https://drupal-bootstrap.org/api/bootstrap/docs!Sub-Theming.md/group/sub_theming/8.x-3.x

  3. Since i wish to use/edit the Bootswatch Cyborg theme, in Drupals Appearance “bootstrap_subtheme” CDN Settings I have the following set:

    CDN Provider:jsDelivr, Theme:Cyborg

bootstrap_subtheme file tree:

 1. bootstrap_subtheme.info.yml 
 2. bootstrap_subtheme.libraries.yml
 3. bootstrap_subtheme.theme
 4. config/install/bootstrap_subtheme.settings.yml
 5. config/schema/bootstrap_subtheme.schema.yml
 6. css/style.css

bootstrap_subtheme.info.yml

type: theme
base theme: bootstrap
core: 8.x
core_version_requirement: ^8 || ^9

name: 'bootstrap_subtheme'
description: 'A Drupal Bootstrap 3 based sub-theme.'
package: 'Bootstrap'

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-extend:
  bootstrap/framework:
    - bootstrap_subtheme/framework

bootstrap_subtheme.libraries.yml

framework:
  css:
    theme:
      css/style.css: {}

bootstrap_subtheme.theme

.empty /null

config/install/bootstrap_subtheme.settings.yml

schemas: ()

config/schema/bootstrap_subtheme.schema.yml

bootstrap_subtheme.settings:
  type: theme_settings
  label: 'bootstrap_subtheme settings'

css/style.css

.h1 { font-size: 200px; color:red; }
.h2 { font-size: 95px; }
label { font-weight: 100; }

I’ve flushed all Caches. The styling does not take effect.
When Inspecting a webpage element(with Firefox) the stylesheet that it is using, points to: https://cdn.jsdelivr.net/npm/bootswatch@3.4.0/cyborg/bootstrap.min.css

Further to this, I’ve tried something else.
I’ve created a full HTML page in drupal(published) and applied a style within it: “.h1 {font-size:10px;}”. The styling executes, and changes as should.

So please, can somebody tell me, where is this going wrong?

Bottom line is, css/style.css(chmod 744) is not being read. Why?