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

Question

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

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

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

编辑:经过一些研究，我发现 node_modules 不适合以这种方式使用(请参阅 this )。不过，如果将来发生变化，请随时添加您的答案。

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

Answer 1

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

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"给您scripts在package.json

7. npm run build

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