使用'require'时如何从库中加载CSS

Question

我正在构建一个electron 应用程序。其中，我有一个webview 和一个preload script。里面说的脚本，我想用sweetalert。

我用npm install --save sweetalert 安装了sweetalert。在我的脚本中，我使用require('sweetalert') 加载它并使用swal("Hello world!"); 调用它。我现在注意到它看起来不正确，因为警报缺少它的required CSS file。但是我用require('sweetalert') 加载它，这很好，因为sweetalert 可以保留在node_modules 内的目录中，我不必关心它，但它的CSS 是它不可或缺的一部分，并且不会以同样的方式拉动。

现在，解决此问题的推荐方法是什么？请记住，我在 javascript 文件中，并希望保持这种状态。我真的必须以某种方式获取 CSS 文件和 inject it 吗？既然它在node_modules 内，我该如何正确地做到这一点？经过测试，由于Content Security Policy，在这种特殊情况下似乎无法完成。

无论如何，与require 语句相比，这似乎太笨拙了，如果没有更简单的解决方案似乎很奇怪。

Answer 1

您必须像通常在浏览器中那样包含它，例如在 index.html 中。如果有的话，将其从模块文件夹复制到您的 css 文件夹中，并将其与链接标签链接。这取决于您使用的是普通电子还是其他样板模板，其中有一个 gulp/grunt 工作流程可以将其粘贴在哪里，但事实就是如此，电子只是一个运行您的 JS/html 的浏览器，所以它真的完全相同过程。 require 只加载 JS 模块而不加载样式。

如果您想动态包含它，您可以使用与常规浏览器相同的技术（例如 document.write/create 元素）。

Answer 2

我不熟悉 sweetalert，但希望这会有所帮助。

您的 require 语法应该与此类似。

var sweetalert = require('sweetalert')

然后您应该能够使用以下语法访问 sweetalert 对象上的方法。

sweetalert.someMethod()

记住要求只返回一个 javascript 对象。这些对象通常具有允许某些功能的方法。如果您想将 sweetalert 添加到您的页面，则需要将其注入 html 中，或者 sweetalert 模块中的 javascript 需要动态创建包含 css 的 html。我希望能澄清一些事情并帮助您更好地了解一些内部运作。