Recently, I've embarked on the journey of working on a complex styling project for a large application. Knowing that Bootstrap 4 offers SASS files, I made the decision to align with that framework.
To streamline my workflow, I established the following file structure:
- theme.scss: encompasses overarching theme definitions such as colors and fonts. While there is currently only one file, potential for more exists in the future.
- global.scss: serves as the hub for Bootstrap integration, along with custom overrides and application components - for example, a field intertwined with its label forming part of the top border.
- site.scss: houses general application styles.
- Various page-specific SCSS files, including ones like login.scss.
The challenge I'm currently facing revolves around global.scss importing Bootstrap, which is then further imported by site.scss as well as other files such as page-specific SCSS files. Consequently, Bootstrap styles duplicate across multiple compiled CSS files, the references used within the application.
In past encounters with LESS, I could address this issue using @import (reference) "bootstrap" rather than plain @import "bootstrap". However, in the realm of SASS, no apparent solution presents itself without altering Bootstrap core files.
Are there alternative suggestions for organizing these files effectively while mitigating this complication? Are there nuances I may have overlooked or missteps I am making?
Shown here are condensed snippets from the relevant files to showcase the predicament at hand:
theme.scss
$my-primary-color: #04459a;
global.scss
@import "../theme.scss";
$primary: $my-primary-color;
@import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
@import "global.scss";
div.field {
@extend %field;
}
// [...]
login.scss (or similar)
@import "global.scss";
// [...]
Within the application setup, both site.css and login.css (specifically on the login page) are referenced, each inadvertently incorporating Bootstrap styles.