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> 导入自定义 css在app.html中并将空字符串传递给 config.useCSS('');