如何在 Aurelia 中包含其他 CSS 文件？答案

【问题标题】：How to include additional CSS files in Aurelia?如何在 Aurelia 中包含其他 CSS 文件？
【发布时间】：2019-10-09 18:27:11
【问题描述】：

我有一个应用程序可以打开一个包含内容的新窗口。我需要该窗口的特殊 CSS。

打开窗口的代码是这样的：

var Printwindow = window.open("","","width=360,height=188");
    var cssFile = Printwindow.document.createElement("link");
    cssFile.rel = "stylesheet";
    cssFile.type = "text/css";
    cssFile.href = "../../content/label.css";

    Printwindow.document.write("<head>" + cssFile.outerHTML + "</head><body onload='window.print();'>" + this.label.innerHTML + "</body>");
    Printwindow.document.close();
    Printwindow.focus();

当我在 localhost 中运行它时，label.css 就在那里。但是当我构建它并将其部署到服务器时，它就丢失了。如何在包中包含这个 label.css 以便它可以找到它？

【问题讨论】：

标签： css webpack aurelia

【解决方案1】：

如果你使用 webpack，你应该引用该文件以便 webpack 找到它：

cssFile.href = PLATFORM.moduleName("../../content/label.css");

然后导入PLATFORM：

import {PLATFORM} from 'aurelia-pal';

希望对你有帮助。

【讨论】：

【解决方案2】：

就个人而言，我建议您创建一个组件并在对话框或新窗口中编写它。这将允许您避免在 JS 中构建表示层。如果您创建了自定义组件，则可以执行以下操作：

<template>
 <require from="label.css"></require>
 {Content Here}
</template>

然后您可以将其组合成一个对话框。

或者，如果您无法进行结构更改，那么您应该从 aurelia-pal 导入 PLATFORM 并使用它：

import {PLATFORM} from 'aurelia-pal';
// .. other code here ..
cssFile.href = PLATFORM.moduleName("../../content/label.css");

如果您仍然遇到问题，则可能是因为您需要解析生产服务器的基本 URL。

【讨论】：