Question

我有一个可打开包含内容的新窗口的应用程序。我需要该窗口的特殊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包含在捆绑包中，以便它可以找到它？

Answer 1

如果您使用的是webpack，则应引用该文件，以便webpack可以找到它：

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

并导入PLATFORM：

import {PLATFORM} from 'aurelia-pal';

希望有帮助。

Answer 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。

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

2 个答案: