Custom themes should not import each third-party SCSS file individually, as that makes maintenance more difficult.

[tdonohue]

Describe the bug
(Discovered when reviewing #1617, but it's unrelated to that feature)

Currently, our custom and dspace themes both import a number of third-party SCSS files into their styles/theme.scss from node_modules. For example:

...
@import '../../../../node_modules/bootstrap/scss/bootstrap.scss';
@import '../../../../node_modules/nouislider/distribute/nouislider.min';
...
@import '../../../../node_modules/ngx-ui-switch/ui-switch.component.scss';

See for example https://github.com/DSpace/dspace-angular/blob/main/src/themes/custom/styles/theme.scss

Ideally, we should move these imports into a shared file, so that it's not necessary to modify every theme's theme.scss anytime a new third-party SCSS is used. It'd make maintenance of themes easier as you'd no longer need to look for changes to base-theme.scss which need to be copied to your theme.scss.

As @artlowel suggested in https://github.com/DSpace/dspace-angular/pull/1617/files#r887836233, we might achieve this by creating a new src/styles file for third-party imports, and then import that file into all themes along with src/styles/base-theme.scss. For example, it might be a src/styles/_module_styles.scss (or similar) which is then imported into every theme.

[artlowel]

This can be done in an estimated 4 hours
Atmire would like to work on this.
Assigning myself since @tdonohue is on holiday