I would like to override a Sass variable in my DSpace Mirage 2 theme to understand how to customize the theme.
If I want to make the following changes, where should I place them?
$brand-primary: #607890;
$navbar-inverse-bg: #607890;
$navbar-inverse-link-color: yellow;
I have tried adding a variable declaration in several locations, but it is not included in the compiled CSS file.
I am able to add new CSS rules to styles/_styles.scss and those rules are built into the the final CSS.
In the classic_mirage_color_scheme the Bootstrap variables are set in classic_mirage_color_scheme/bootstrap_variables so you could simply copy the file to /dspace/modules/xmlui-mirage2/src/main/webapp/themes/Mirage2/styles/classic_mirage_color_scheme/_bootstrap_variables.scss.
The classic_mirage_color_scheme also defines a couple of its own variables in classic_mirage_color_scheme/_dspace_variables.scss. This would be a good place to add your non-bootstrap variables too.
The bootstrap_color_scheme doesn't override or define any variables. So when you start from the bootstrap_color_scheme you'd need to override in bootstrap_color_scheme/_main.scss like you did. (Beware the relative paths for importing files cfr. a related question)
The variables are all set with !default, this means they're only set if they haven't been set before. That's why overriding the variables only works before the imports.
Because the classic_mirage_color_scheme imports _bootstrap_variables.scss before _dspace_variables.scss, variables set in the latter won't be set if they have been set in the first.