How to put the Bootswatch theme locally?

Question

I am using this sub-theme and I can't find any help.

• bootstrap-barrio-installation

• barrio-starter-kit

I am currently using Bootswatch Flatly in CDN mode. I want to put everything locally.

Here is what I did:

1. I ran the following 2 commands on my server :

mkdir -p web/libraries/bootstrap
cp -R vendor/twbs/bootstrap/dist web/libraries/bootstrap

2. I modified the bootstrap_subtheme_front_office.info.yml file :

name: Bootstrap Subtheme Front Office
type: theme
description: 'SASS starter kit for a Bootstrap Barrio SubTheme.'
# version: VERSION
core: 8.x
core_version_requirement: ^8 || ^9
base theme: bootstrap_barrio

libraries:
  - bootstrap_subtheme_front_office/bootstrap
  - bootstrap_subtheme_front_office/global-styling
libraries-override:
  bootstrap_barrio/global-styling: true
  bootstrap_barrio/file: true
regions:
  navigation_collapsible_first: 'Navigation (Collapsible first)'
  navigation_collapsible_left: 'Navigation (Collapsible left)'
  navigation: 'Navigation'
  navigation_collapsible_right: 'Navigation (Collapsible right)'
  navigation_collapsible_second: 'Navigation (Collapsible second)'
  breadcrumb: 'Breadcrumb'
  header: 'Top Bar'
  sidebar_first: 'Primary'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_second: 'Secondary'
  footer: 'Footer'

# Information added by Drupal.org packaging script on 2020-10-11
version: '5.0.2'
project: 'bootstrap_subtheme_front_office'
datestamp: 1602444143

And I modified the bootstrap_subtheme_front_office.libraries.yml file :

global-styling:
  version: VERSION
  js: 
    js/popper.min.js: {}
    js/bootstrap.min.js: {}
    js/barrio.js: {}
    js/custom.js: {}
    js/back-to-top.js: {}
    js/copy-to-clipboard.js: {}
  css:
    component:
      css/style.min.css: {}
  dependencies:
    - core/jquery
    - core/drupal
bootstrap:
  js:
    /libraries/bootstrap/dist/js/bootstrap.bundle.min.js: {}
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}

3. I downloaded the 4 Bootswatch Flatly files to my computer:

I copied the 4 files in the folder

/libraries/bootswatch/dist/flatly

4. I executed the gulp and drush cr command.

MY PROBLEM

How to declare Bootswatch? Where to put the files?

Answer 1

The theme can not read the SCSS file. You have to covert them to CSS. To do this, follow the following instruction.

1. Create a new SCSS(Let's name it the "custom.scss") and import all the SCSS to this file. and convert it to CSS."
   In the new "custom.scss" file, import the "_bootswatch.scss" and "_variables.scss". To do this, use the @import function. Add the following code to your "custom.scss".

   @import 'bootswatch', 'variables';

2. Use a SCSS compiler to covert the SCSS to CSS.
   Covert the "custom.scss" file to "custom.css", then minify the file to "custom.min.css".

3. On your "bootstrap_subtheme_front_office.libraries.yml" file, include the "custom.min.css". Add the following code below the "css/style.min.css: {}"

   css/custom.min.css: {}