Problem/Motivation
Something about the new `import.scss` file is breaking popper and/or bootstrap handling of site elements.
Steps to reproduce
Using Barrio Bootstrap SASS Starter Kit →
build a default sub-theme with script:
bash scripts/create_subtheme.sh
If gulp not already installed add gulp cli:
npm install --global gulp-cli
Install dependencies from inside sub-theme folder:
npm install
Go to Drupal site and set new sub-theme as default, it will look something like this:
With a dropdown button on the page:
Proposed resolution
Update the default `sub_theme/scss/import.scss` file. The current file looks like this.
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";
// 4. Include any default map overrides here
// variables
@import "variables";
// typography
@import "typography";
// 5. Include remainder of required parts
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// 6. Optionally include any other parts as needed
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 8. Add additional custom code here
@import "mixins";
// barrio
@import "barrio";
To correct the problem I deleted the current contents of `import.scss` and changed it back to the older form:
/* IMPORTS */
//@import url(font-awesome.min.css);
// variables
@import "variables";
// typography
@import "typography";
//bootstrap
@import "bootstrap";
//material design bootstrap
//@import "../node_modules/mdbootstrap/scss/mdb-free.scss";
// mixins
@import "mixins";
// barrio
@import "barrio";
Fix with dropdown button