Bundling Angular project without compiling - css

Question

I divided my Angular 6 Project in many modules. Those modules reference a ui module containing all the style sheets (SASS) as values e.g.
$primary-text-color: #dde7ff !default;
The reason for this is reusability of the modules. After building one of those modules the stylesheets are already part of the *.js files. Everything is CSS and and the scss values doesn't exist anymore.
However, this approach doesn't allow the consumer to theme or change the values e.g. colors or fonts of the components inside the module afterwards.
My objective is to allow the consumer to:
create a new angular-cli project
define own global style variables like $primary-text-color: #dddddd !default; and therefore overwrite the mentioned variables
referencing existing modules
build the application.
The expected result would be an application with the look/theme of the consumers new style. With this approach the consumer wouldn't be forced to style each component manually.
To achieve this would it be possible to:
create angular-cli libraries without compiling the ts files and rendering the stylesheets? This would be just a bundle of the original files, but in a library. In this case the reference to the variables still exist and could be overwritten.
Style the components in the module with global stylesheets afterwards?

Answer 1

You can't really bundle your code without building it.
But, maybe there is a workaround for what you trying to achieve.
you can create an InjectionToken with the theming option.
Let say:
export interface Theming{
color: string;
}
const THEMING_CONFIG : InjectionToken<Theming> = new InjectionToken<Theming>('Theming Config');
Now, in your lib Module:
#NgModule()
....
export class UIModule{
static init(config: Theming): ModuleWithProviders {
return {
ngModule: UIModule,
providers: [{provide: THEMING_CONFIG, useValue: config}]
}
}
}
Now in each and every component in your lib you can inject the InjectionToken and use it in to style the elements (ngStyle?)
The usage of the lib for the end-user will be:
#NgModule
...
export class AppModule {
imports: [..., UIModule.init(USER_COLOR_HERE)]
}