Electron：如何在我们的index.html中导入或包含使用npm包管理器安装的CSS？

Question

node_modules在开发过程中，我们的 Electron 项目的根目录中有一个文件夹，其中包含我们已安装的所有包。因此，在开发过程中，我们可以编写类似这样的代码来将 CSS 文件导入到我们的网页中：

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

我们如何才能在不使用 CSS 的情况下打包和分发的项目中包含 CSS node_modules？

编辑：经过一些研究，我发现node_modules不应该以这种方式使用（请参阅此）。不过，如果将来发生变化，请随时添加您的答案。

链接到我开始的存储库：https ://github.com/electron/electron-quick-start

Answer 1

经过一些研究后，由于您使用的是原始样板，所以我安装了它并按照您所说的进行了相同的操作。由于您的主要问题是在打包时在生产中导入样式表，因此您可以使用electron-packager它来构建应用程序，这将导致后者独立于您在开发过程中安装的节点模块。您可以执行以下步骤进行测试：

1. npm i
2. npm i bootstrap --save
3. 添加<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> 到头部
4. <button type="button" class="btn btn-danger">Button</button>为了测试而添加到主体中

5. npm install electron-packager --save

6. 添加到"build": "electron-packager . --asar"您的scriptspackage.json

7. npm run build

然后就可以看到Bootstrap已经正常使用了。