Custom SCSS @import

Bootstrap Studio Help
1

I have created a custom.scss file, to be able to add additional margin spacers (i.e. 0-5+6,7…). After creating the file, I’m attempting to import the bootstrap and variables files using the following:

@import “/scss/bootstrap”;
@import “scss/variables”;

However, when saving the file, I get the following error:
“file to import not found bootstrap.scss”

Is a path needed when importing? I have no way to search for a path, that I know of since it’s handled by Bootstrap Studio internally.

Thanks in advance,
Todd

2

You will have to download the current version of the Bootstrap source files and then drag the folder or import them all at once so they are available for you to use when compiling your new theme. If you import directly to your Styles folder the paths would be:

@import "mixins/banner";
@include bsBanner("");


// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack

Also you should create a .css empty theme that is blank with nothing in it to import into Themes in settings (mine is called Bootstrap Blank v0.0.0) and then choose it under Design > Bootstrap in the settings. This will keep from having two active Bootstrap styesheets from showing in your project at the same time. When you get done modifying the sass theme, you should really export and import it in settings as your theme, then also deactivate the sass source files from being compiled by putting a _ underscore in front of the bootstrap.scss file.

If this all seems to complex you could just add you custom 6 and 7 settings for all the breakpoint sizes as a regular css file.

The challenge will be to keep current with the version of Bootstrap Bootstrap Studio uses and keep updating your sass Bootstrap version folder structure when they do. It seems they have made this much easier with improved drag or importing of files though so thats not much trouble to do. This is also why you never modify the core source files, so you can update without losing your changes.

It would be nice to have a checkbox that would automactially do this all so we did not have to disable the theme in settings (it would do this for you) and then it would also provide the sass files of the current version (greyed out so you could not modify them but read).

3

Why are your imports skewed?

One points to current + append
while the other points to root.

What gives? Is this what you
meant to do? I don’t know.

This is just an observation
on my part, nothing more.

4

Thank you twinstream,

That got me pointed in the right direction. I was assuming that Bootstrap Studio already contained the Bootstrap 5 source files. I ended up downloading and copying the source files to a directory inside Styles. And my custom.scss file now looks like this. This lets me create additional spacers beyond the default 0-5, and handles the breakpoints too.

@import ‘bootstrap/scss/bootstrap’;
@import ‘bootstrap/scss/functions’;
@import ‘bootstrap/scss/variables’;
@import ‘bootstrap/scss/mixins’;

$spacers: map-merge((
6: 4rem,
7: 5rem,
8: 6rem,
9: 7rem,
10: 8rem,
),
$spacers
);

$breakpoints: (
‘xs’: ‘screen and (min-width: 0px)’,
‘sm’: ‘screen and (min-width: 576px)’,
‘md’: ‘screen and (min-width: 768px)’,
‘lg’: ‘screen and (min-width: 992px)’,
‘xl’: ‘screen and (min-width: 1200px)’,
‘xxl’: ‘screen and (min-width: 1400px)’
);

@each $spacer, $size in $spacers {
@each $breakpoint, $media-query in $breakpoints {
@media #{$media-query} {
.m-#{$breakpoint}-#{$spacer} { margin: $size !important; }
.mt-#{$breakpoint}-#{$spacer} { margin-top: $size !important; }
.mb-#{$breakpoint}-#{$spacer} { margin-bottom: $size !important; }
.mr-#{$breakpoint}-#{$spacer} { margin-right: $size !important; }
.ml-#{$breakpoint}-#{$spacer} { margin-left: $size !important; }
.mx-#{$breakpoint}-#{$spacer} { margin-left: $size !important; margin-right: $size !important; }
.my-#{$breakpoint}-#{$spacer} { margin-top: $size !important; margin-bottom: $size !important; }
}
}
}

Sorry for the code indentation, but the editor flattened everything.

Thanks,
Todd

5

I wanted to update this topic since I encountered more problems than solutions importing the Bootstrap 5 source and referencing those source files in my custom.scss file.

  1. Exporting and publishing takes a lot longer due to all of the added SCSS files.
  2. My page layouts looked fine in the editor and in preview mode, but were broken when viewing a published version. I’m guessing that the imported SCSS files might be conflicting with the core files. This is probably fixable, but more work than needed.

I did manage to find a more elegant solution though. My custom.scss file doesn’t need any external files now and I can define custom spacers as needed. This was solved by defining $spacers and $breakpoints directly in the file instead of importing them, and no external files needed to be imported.

The updated custom.scss file is shown below. In the $spacers array, 1-5 are commented and only shown for reference. They are not needed, since 1-5 are already defined in Bootstrap. This creates 6-12 spacers (ex: mb-7 mb-lg-10 mb-xxl-11).

// Spacers (6-12 are custom spacers)
$spacers: (
/0: 0rem,
1: .25rem,
2: .5rem,
3: 1rem,
4: 1.5rem,
5: 3rem,/
6: 4rem,
7: 5rem,
8: 6rem,
9: 7rem,
10: 8rem,
11: 9rem,
12: 10rem
);

// Bootstrap-5 default breakpoints
$breakpoints: (
‘xs’: ‘screen and (min-width: 0px)’,
‘sm’: ‘screen and (min-width: 576px)’,
‘md’: ‘screen and (min-width: 768px)’,
‘lg’: ‘screen and (min-width: 992px)’,
‘xl’: ‘screen and (min-width: 1200px)’,
‘xxl’: ‘screen and (min-width: 1400px)’
);

// Non-breakpoint spacers (ex: mb-2)
@each $spacer, $size in $spacers {
.m-#{$spacer} { margin: $size !important; }
.mt-#{$spacer} { margin-top: $size !important; }
.mb-#{$spacer} { margin-bottom: $size !important; }
.mr-#{$spacer} { margin-right: $size !important; }
.ml-#{$spacer} { margin-left: $size !important; }
.mx-#{$spacer} { margin-left: $size !important; margin-right: $size !important; }
.my-#{$spacer} { margin-top: $size !important; margin-bottom: $size !important; }
}

// Breakpoint spacers (ex: mb-xl-5)
@each $spacer, $size in $spacers {
@each $breakpoint, $media-query in $breakpoints {
@media #{$media-query} {
.m-#{$breakpoint}-#{$spacer} { margin: $size !important; }
.mt-#{$breakpoint}-#{$spacer} { margin-top: $size !important; }
.mb-#{$breakpoint}-#{$spacer} { margin-bottom: $size !important; }
.mr-#{$breakpoint}-#{$spacer} { margin-right: $size !important; }
.ml-#{$breakpoint}-#{$spacer} { margin-left: $size !important; }
.mx-#{$breakpoint}-#{$spacer} { margin-left: $size !important; margin-right: $size !important; }
.my-#{$breakpoint}-#{$spacer} { margin-top: $size !important; margin-bottom: $size !important; }
}
}
}

Thanks,
Todd

6

For Bootstrap 5 they changed to ms- (start) and me- (end) instead of ml- (left) and mr- (right). Glad you found a easy solution for the spacers…

@import "mixins/banner";
@include bsBanner("");


// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "maps";
@import "mixins";
@import "utilities";

$spacers: map-merge(
  $spacers,
  (
    6: 3rem,
    7: 3.5rem,
    8: 4rem,
    9: 4.5rem,
    10: 5rem
  )
);

// Margin utilities
$utilities: map-merge(
  $utilities,
  (
    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $spacers
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $spacers
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $spacers
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $spacers
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $spacers
    )
    // Add margin utilities for other sides if needed
  )
);

// Padding utilities
$utilities: map-merge(
  $utilities,
  (
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    )
  )
);

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack
7

Thank you. I will modify my script to change ml and mr to ms and me? I appreciate the feedback.

8

@toddt I would love to hear a little more about how you are doing this without first importing the BS source sass files.

What theme are you starting with?

Understanding your project setup for this would be helpful as I am trying to replicate but only can do with importing all the source sass files first.

Thanks.

9

hi
Idid like you and use @import in the custom.scss and import to BS the bootstrap SCSS file but when I publish the website the layout is broken. I try you new solution because I override a lot variables to custom my site, like spacer, colors, buttons, etc. But it doesn’t work for me.

anyone can help me to edit and override Sass variables for custom design in a good practice?
Thanks

10

Try creating an empy css file, save it as bootstrap.css and use that as your theme in bootstrap settings, then your imported scss won’t clash with the original bootstrap theme.