I'm currently tasked with setting up utility classes for a company that wishes to create their own. Here are some key details:
- The imports listed are already in use by the company, and I have added code to generate classes like test-25, which is not working as expected.
- The CSS compiles without errors, but my utility code is not showing up in the final output.
- To test if the SASS import is working correctly, I added styles such as { background: red } which worked, but the utility class below was not included in the compiled CSS.
Here is the code I am working with:
// Bootstrap SCSS
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import 'bootstrap/scss/functions';
// 2. Include remainder of required Bootstrap stylesheets
@import './variables';
// 3. Include any default variable overrides here
@import '../custom';
// 4. Include any default map overrides here
// 5. Include remainder of required parts
@import 'bootstrap/scss/maps';
@import 'bootstrap/scss/mixins';
@import 'bootstrap/scss/root';
// 5. Custom mixins
@import './mixins/forms';
// 6. Optionally include any other parts as needed
@import 'bootstrap/scss/utilities';
@import './reboot'; // evi
@import 'bootstrap/scss/type';
@import 'bootstrap/scss/images';
@import 'bootstrap/scss/containers';
@import 'bootstrap/scss/grid';
@import 'bootstrap/scss/tables';
@import 'bootstrap/scss/forms/floating-labels';
@import 'bootstrap/scss/forms/form-check';
@import 'bootstrap/scss/forms/form-control';
@import './forms/form-range'; // evi
@import 'bootstrap/scss/forms/form-select';
@import 'bootstrap/scss/forms/form-text';
@import 'bootstrap/scss/forms/input-group';
@import 'bootstrap/scss/forms/labels';
@import 'bootstrap/scss/forms/validation';
@import 'bootstrap/scss/buttons';
@import 'bootstrap/scss/transitions';
@import 'bootstrap/scss/dropdown';
@import 'bootstrap/scss/button-group';
@import 'bootstrap/scss/nav';
@import 'bootstrap/scss/navbar';
@import 'bootstrap/scss/card';
@import 'bootstrap/scss/accordion';
@import 'bootstrap/scss/breadcrumb';
@import 'bootstrap/scss/pagination';
@import 'bootstrap/scss/badge';
@import 'bootstrap/scss/alert';
@import 'bootstrap/scss/progress';
@import 'bootstrap/scss/list-group';
@import 'bootstrap/scss/close';
@import 'bootstrap/scss/toasts';
@import 'bootstrap/scss/modal';
@import 'bootstrap/scss/tooltip';
@import 'bootstrap/scss/popover';
@import 'bootstrap/scss/carousel';
@import 'bootstrap/scss/spinners';
@import 'bootstrap/scss/offcanvas';
@import 'bootstrap/scss/placeholders';
@import 'bootstrap/scss/helpers';
// my code:
$utilities: map-merge(
$utilities, (
"test": (
property: opacity,
values: (
0: 0,
25:.25,
50:.5,
75:.75,
100: 1,
)
)
)
);
// 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import 'bootstrap/scss/utilities/api';