Early Bird Registration for DrupalCon Portland 2024 is open! Register by 23:59 PST on 31 March 2024, to get $100 off your ticket.
I created a SCSS based starter kit by following the steps at: https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s...
However, I noticed that the file "scss/style.scss" in the starterkit has a statement:
@import '../bootstrap/assets/stylesheets/bootstrap';
but this path '../bootstrap/assets/stylesheets/bootstrap' does not exist.
The instructions on https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s... do not mention this path, so I would say that it is a bug (an omission) in this documentation.
Can you advise, please?
Comments
Comment #2
therobyouknow CreditAttribution: therobyouknow commentedTo solve this and have a working sub-theme based on bootstrap, in addition to the steps at https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s... the following additional things needed doing:
(Credit: https://www.webwash.net/getting-started-bootstrap-drupal-8/#create-sub-t... for steps 1) - 3) )
1) The bootstrap library itself was missing. The guide at: https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s... did not mention that one needs to do this
In your Drupal sub-theme (of bootstrap) top-level folder, I did the following to get the bootstrap library itself, my example is for v3.3.7:
2) Go to
bootstrap_sass/bootstrap/assets/stylesheets/bootstrap/_variables.scss
and copy the variables intobootstrap_sass/scss/_default-variables.scss
. Paste them just below the$icon-font-path
variable.The quickest way for me to do this was to:
(from my sub-theme top level folder)
then, in the
_default-variables.scss
file,delete the line:
$bootstrap-sass-asset-helper: false !default;
...that appears above the variables, as in:
3) Edit
scss/style.scss
to change:@import '../bootstrap/assets/stylesheets/bootstrap';
to:
@import '../bootstrap_sass/assets/stylesheets/bootstrap';
so that the whole
scss/style.css
file looks like:4) I used gulp as my task runner for compiling scss to css, by following this guide here: https://www.digitalocean.com/community/tutorials/how-to-get-started-with...
But I had to custom adjust my particular gulpfile.js so that the statement...:
was now:
This was because I got an error when running gulp watch which was:
"TypeError: glob pattern string required"
Credit: https://stackoverflow.com/a/32968934/227926
So this is what my whole
gulpfile.js
now looks like (with the old statement commented out):5) finally, the sub-theme should be in the
custom
folder and not thecontrib
folder, because it is a custom (sub)theme. e.g.docroot/themes/custom/your-bootstrap-sub-theme
(again, the guide at https://drupal-bootstrap.org/api/bootstrap/docs%21Sub-Theming.md/group/s... didn't mention this)To move it (if you need to): first set the site active theme back to bootstrap then disable your subtheme then move it into the custom folder and then re-enable it. Then clear the cache
drush cr
indocroot
folder or via the performance settings in the admin pages.Summary of credits:
Comment #3
therobyouknow CreditAttribution: therobyouknow commentedComment #4
markhalliwellYes it does: https://drupal-bootstrap.org/api/bootstrap/starterkits%21sass%21README.m...
Comment #5
therobyouknow CreditAttribution: therobyouknow commentedMY steps aren't quite right - warning to others - sorry - I will come back and correct them. Thank you.