aurelia - 如何为 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

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