I am using Bootstrap 5.3.3 for a Shopify shop. Importing the full Bootstrap via CDN works fine, but I want to use only parts of Bootstrap via SASS compiled with gulp into custom_css.liquid. It needs to be .liquid, if you later want use liquid in CSS.

I set it up without any custom code exactly as described here (https://getbootstrap.com/docs/5.3/customize/sass/)

This also works fine in general except there are padding definitions missing in the custom.css for the .container and .col classes.

In case of the container that is described in _container.scss mixin.

@mixin make-container($gutter: $container-padding-x) {
  --#{$prefix}gutter-x: #{$gutter};
  --#{$prefix}gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
  padding-left: calc(var(--#{$prefix}gutter-x) * .5); // stylelint-disable-line function-disallowed-list
  margin-right: auto;
  margin-left: auto;
}

The above code will be compiled into custom.css except padding-left and padding-right. I don’t get why this happens since variables for gutter-x are defined just on top of it. gutter-x is 1.5rem.

Any help appreciated.