I am currently developing a unique design library using the latest versions of Bootstrap 5 and Angular. In order to customize the look to fit my specific design needs, I am utilizing the core Bootstrap framework and adding extensions or custom styles.
My approach involves using Bootstrap as follows:
LIBRARY :
Within my library, I have two SCSS files:
design-library.core.scss
// Necessary import for bootstrap functionalities
@import '~bootstrap/scss/functions';
// Library default variables that override Bootstrap's
@import './variables';
design-library.extension.scss
// It is crucial to import the variables in order to prevent any undefined errors
@import './variables'
// Make necessary style overrides to Bootstrap components like
.alert {
background: $white;
}
PROJECT :
When integrating the design-library into my project, I follow this setup:
project.scss
// Importing the default variables from the design library
@import '~/design-library.core';
// Further overriding defaults with additional project-specific variables
@import './project-variables'
// Importing Bootstrap
@import '~bootstrap';
// Importing the customized Bootstrap extension from the design library
@import '~/design-library.extension'
This integration works well, however, I encounter issues with variable overrides. For example, if I set $red: #f00 as the default in the library, but then define $red: #e30000 in the project variables file, the CSS generated will still use $red: #f00 from the library instead of the overridden value. How can I ensure that the extension CSS uses the correct overridden variables defined by the implementing project?
EDIT : Just wondering if my explanation is clear enough? :x