3

I'm integrating the aurelia-dialog plugin into an Aurelia CLI project using TypeScript 2+.

I want to theme dialogs by replacing the default CSS the plugin uses with my own CSS coming from a SASS file, like this:

export function configure(aurelia: Aurelia) {
    aurelia.use
        .standardConfiguration()
        .plugin('aurelia-dialog', (config: DialogConfiguration) => {
            config.useDefaults();
            config.useCSS(aiDialogCss);
        });            

    aurelia.start().then(() => aurelia.setRoot());
}

The aiDialogCss variable has to be a string though, and I don't want to manually embed it in this code, I would prefer to load this CSS string from a separate CSS file that is compiled from SASS and bundled as per any other CSS file.

Is this possible using TypeScript and Aurelia CLI? I tried using import aiDialogCss from "styles/ai-dialog.css!text" but that doesn't compile.

Sam
  • 6,167
  • 30
  • 39

1 Answers1

0

The correct way would be to have your custom css imported with <require from="./your-custom.css"></require> in app.html and passing empty string to config.useCSS('');

Alexander Taran
  • 6,655
  • 2
  • 39
  • 60