如何为 aurelia-dialog 插件加载外部 CSS 文件？

Question

我正在使用 TypeScript 2+ 将 aurelia-dialog 插件集成到 Aurelia CLI 项目中。

我想通过将插件使用的默认 CSS 替换为来自 SASS 文件的我自己的 CSS 来为对话框设置主题，如下所示：

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

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

aiDialogCss 变量必须是一个字符串，我不想手动将它嵌入到这段代码中，我更愿意从一个单独的 CSS 文件中加载这个 CSS 字符串，该文件是从 SASS 编译并捆绑为根据任何其他 CSS 文件。

这可以使用 TypeScript 和 Aurelia CLI 吗？我尝试使用import aiDialogCss from "styles/ai-dialog.css!text"，但编译失败。

Answer 1

正确的方法是在 app.html 中使用 <require from="./your-custom.css"></require> 导入您的自定义 css 并将空字符串传递给config.useCSS('');