Pinegrow, bootstrap and bootswatch

Using tutorial Styling your Bootstrap project with Bootswatch and SASS


the bootswatch themes are specifically identified as for Bootstrap 4.5.3 and using Theme Sandstone, I have followed instructions to the point of editing the custom.scss file as follows:

/* Bootstrap theme customized with Pinegrow Web Editor /
/
Vars go before the @import /
/
Import the Bootstrap files */
@import “variables”;
@import “bootstrap/bootstrap”;
@import “bootswatch”;

/* Custom CSS rules come here */

but if I now try to save and close the project I get the following message:

Some files were not saved

The following stylesheets were not saved:

  • file:/// … /bootstrap_theme/custom.scss - Incompatible units: ‘px’ and ‘rem’. in file variables at 210:35
    If I examine the file ‘variables’ - presumably the _variables downloaded from bootswatch and added to the bootstrap_theme folder, at line 210:35 there is no px or rem mentioned (although there are a good variety of both px and rem included elsewhere in that file,

209 //** Default .form-control height
210 $input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;

Can you give me some idea of what the problem is?

Many thanks,
Richard