0

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

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
  1. 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: {}
  1. I downloaded the 4 Bootswatch Flatly files to my computer:

https://i.stack.imgur.com/PMMrB.png

I copied the 4 files in the folder

/libraries/bootswatch/dist/flatly
  1. I executed the gulp and drush cr command.

MY PROBLEM

How to declare Bootswatch? Where to put the files?

1 Answer 1

0

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: {}

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.